如何在 Amserial 图表中添加图例

我在 AngularJS 应用程序中使用 Amcharts 创建一个简单的条形图。以下是我在控制器中的代码：

        let empChart;
        let empBarGraph;
        let empLine;
        const writeemp = data => {
            const {
                total,
                employees,
            } = data;

            empChart.dataProvider = e;
            empChart.write('emp');
            empChart.validateData();
        };

        AmCharts.handleLoad();

        var configChart = function () {


            empChart = new AmCharts.AmSerialChart();
            empChart.categoryField = "state";
            empChart.labelRotation = 90;

            var yAxis = new AmCharts.ValueAxis();
            yAxis.position = "left";
            empChart.addValueAxis(yAxis);


            empBarGraph = new AmCharts.AmGraph();
            empBarGraph.valueField = "count";
            empBarGraph.type = "column";
            empBarGraph.fillAlphas = 1;
            empBarGraph.lineColor = "#f0ab00";
            empBarGraph.valueAxis = yAxis;
            empChart.addGraph(empBarGraph);
            empChart.write('empChart');


            $http.get(hostNameService.getHostName()+"/dashboard/employees/statecount")
                .then(response => writeemp(response.data));
        }

html 中的代码：

                       <div class='panel-body'>
                            <div id="empChart"></div>
                        </div>

这将返回 x 轴上的 State 值和 y 轴上的 count。我想根据状态值过滤图表，但不确定如何为此图表创建图例。谁能建议我如何使用图例。我想为返回的状态值创建图例。

您可以使用基于 OO 的语法通过创建图例对象来添加图例new AmCharts.AmLegend()并通过调用图表将其添加到类中addLegend method:

var legend = new AmCharts.AmLegend();
empChart.addLegend(legend);

如果您希望图例在将鼠标悬停在列上时显示值，则需要添加ChartCursor到你的图表：

var cursor = new AmCharts.ChartCursor();
empChart.addChartCursor(cursor);

您可以通过设置更改列翻转时图例显示的内容valueText财产。它允许相同的[shortcodes]用于诸如balloonText and labelText, e.g. legend.valueText = "[[category]]: [[value]]"。您还可以使用设置其valueFunction如果您需要自定义文本，它会像之前的问题一样动态返回。图例对象中的所有可用属性都可以在AmLegend API 文档 http://docs.amcharts.com/3/javascriptcharts/AmLegend.

Updated:

图例仅在图形对象上工作，因此没有开箱即用的方法允许您将每列表示为图例项来切换其他列的可见性，除非您愿意重新组织数据集并使用不同的图形每个状态的对象。解决此问题的方法是使用图例的自定义data数组并添加一些事件处理，以便单击自定义数据项可以通过取消设置来添加/删除切换countdataProvider 中的 valueField。

以下带注释的代码完成了您想要做的事情：

  //create the legend but disable it until the dataProvider is populated,
  //since you're retrieving your data using AJAX
  var legend = new AmCharts.AmLegend();
  legend.enabled = false;

  chart.addLegend(legend);
  chart.toggleLegend = false;

  // Callback that handles clicks on the custom data entry markers and labels
  var handleLegendClick = function(legendEvent) {
    //Set a custom flag so that the dataUpdated event doesn't fire infinitely
    legendEvent.chart.toggleLegend = true; 

    // The following toggles the markers on and off.
    // The only way to "hide" a column is to unset the valueField at the data index,
    // so a temporary "storedCount" property is added to the dataProvider that stores the 
    // original value so that the value can be restored when the legend marker is toggled
    // back on
    if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) {
      legendEvent.dataItem.hidden = false;
      legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count = legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].storedCount; //restore the value
    } else {
    // toggle the marker off
      legendEvent.dataItem.hidden = true;
      legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].storedCount = legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count;  //store the value
      legendEvent.chart.dataProvider[legendEvent.dataItem.stateIdx].count = undefined; //set to undefined to hide the column
    }
    legendEvent.chart.validateData(); //redraw the chart
  }


  chart.addListener('dataUpdated', function(e) {
    var legendDataItems; //used to store the legend's custom data array.

    if (e.chart.toggleLegend === true) {
      //is the user toggling a legend marker? stop here as the dataProvider will get updated in handleLegendClick
      e.chart.toggleLegend = false;
      return;
    }

    // if we're at this point, the data provider was updated. 
    // reconstruct the data array.
    // initialize by grabbing the state, setting a color and stoing the index
    // for toggline the columns later
    legendDataItems = e.chart.dataProvider.map(function(dataElement, idx) {
      return {
        'title': dataElement.state,
        'color': graph.lineColor,
        'stateIdx': idx //used in toggling
      }
    });

    // if the legend is not enabled, then we're setting this up for the first time.
    // turn it on and attach the event handlers
    if (e.chart.legend.enabled === false) {
      e.chart.legend.enabled = true;
      e.chart.legend.switchable = true;

      e.chart.legend.addListener('clickMarker', handleLegendClick);
      e.chart.legend.addListener('clickLabel', handleLegendClick);
    }

    // update the legend custom data and redraw the chart
    e.chart.legend.data = legendDataItems;
    e.chart.validateNow();
  });

这是一个小提琴来说明这一点：http://jsfiddle.net/g254sdq5/1/ http://jsfiddle.net/g254sdq5/1/