如何Amserial添加圖表圖例

Question

我使用Amcharts我AngularJS應用程序創建一個簡單的酒吧chart.The以下是我的控制器代碼：

 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軸上的狀態值和在y軸上的值。我想根據狀態值過濾圖表，並不確定如何爲此圖表創建圖例。誰能告訴我如何使用傳說。我想爲正在返回的狀態值創建圖例。

Answer 1

使用基於面向對象的語法通過new AmCharts.AmLegend()創造傳奇對象，並將其添加到類調用圖表的addLegend方法您可以添加一個傳說：

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

如果你想圖例顯示值當鼠標懸停在列，你需要一個ChartCursor添加到您的圖表：

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

你可以改變什麼圖例顯示在列側翻通過設置valueText財產。它允許在諸如balloonText和labelText之類的字段中使用的相同[shortcodes]，例如， 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/