Question

我在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。我想根据状态值过滤图表，并且不确定如何为此图表创建图例。任何人都可以建议我如何使用传说。我想为正在返回的状态值创建图例。

Answer 1

您可以使用基于OO的语法添加图例，方法是通过new AmCharts.AmLegend()创建图例对象，然后通过调用图表的addLegend方法将其添加到类中：

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

如果您希望图例在悬停在列上时显示值，则需要在图表中添加ChartCursor：

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

您可以通过设置valueText属性来更改图例在列翻转时显示的内容。它允许在[shortcodes]和balloonText等字段中使用相同的labelText，例如legend.valueText = "[[category]]: [[value]]"。如果您需要自定义动态返回的文本，您也可以使用设置其valueFunction，就像之前的问题一样。可以在AmLegend API documentation。

中找到图例对象中可用的所有属性

更新

图例只能处理图形对象，因此没有开箱即用的方法可以将每个列表示为切换其他列的图例项目。可见性，除非您愿意重新组织数据集并为每个州使用不同的图形对象。解决方法是使用图例的自定义data数组并添加一些事件处理，以便点击自定义数据项通过取消设置count 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/

如何在Amserial图表中添加图例

1 个答案: