javascript/amcharts - 범례를 사용하여 Amchart 칼럼 차트 용 그래프 1 열 표시/숨기기 방법을 쉽게 알아보십시오

Question

그래프에 항목에 대해 전환 가능한 기능이있는 범례를 추가하는 쉬운 방법을 찾지 못하는 것 같습니다 amcharts. 나는 주위를 돌면서 전환 가능한 그래프가있는 기둥 형 차트 (JSFiddle 1)를 발견했다. 전환 가능한 항목 범례를 발견했지만 적절하게 크기를 조정하지 않았습니다 (JSFiddle 2).

하나의 그래프 (CodePen 1)의 여러 항목에서 범례를 추가하는 데 가장 근접한 곳입니다. 그것은 amchart 웹 사이트 자체에서 왔지만 전환 가능한 기능은 없습니다. 열 크기 조정을 허용하는 전환 가능한 기능을 여기에 추가하려면 어떻게합니까 (예 : 2 개 항목이 10 열보다 큰 열로 표시됩니까)? 나는 스위치 기능을 추가 할 수 있다면 단지보고 처음에 이것을 시도했지만 작동하지 않습니다

AmCharts.addInitHandler(function(chart) { 
    //check if legend is enabled and custom generateFromData property 
    //is set before running 
    if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) { 
    return; 
    } 

    var categoryField = chart.categoryField; 
    var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField; 
    var legendData = chart.dataProvider.map(function(data) { 
    var markerData = { 
     "title": data[categoryField] + ": " + data[chart.graphs[0].valueField], 
     "color": data[colorField] 
    }; 
    if (!markerData.color) { 
     markerData.color = chart.graphs[0].lineColor; 
    } 
    return markerData; 
    }); 

    chart.legend.data = legendData; 

    // here is the code I add 
    chart.legend.switchable=true; 

} 

Answer 1

업데이트 - AmCharts knowledge base demo 아래 수정 사항을 포함하도록 업데이트되었습니다.

차트의 크기를 변경하려면 실제로 dataProvider을 수정하고 배열에서 요소를 제거하고 차트를 다시 그려야합니다. 범례의 clickMarker을 사용하여 데이터 항목을 이벤트 dataItem 객체에 저장하고 숨겨진 플래그를 통해 필요에 따라 검색 할 수 있습니다. 함께 이전 솔루션에서 바이올린을 결합, 나는이 함께했다 :

/* 
    Plugin to generate legend markers based on category 
    and fillColor/lineColor field from the chart data by using 
    the legend's custom data array. Also allows for toggling markers 
    and completely removing/adding columns from the chart 

    The plugin assumes there is only one graph object. 
*/ 
AmCharts.addInitHandler(function(chart) { 

    //method to handle removing/adding columns when the marker is toggled 
    function handleCustomMarkerToggle(legendEvent) { 
     var dataProvider = legendEvent.chart.dataProvider; 
     var itemIndex; //store the location of the removed item 

     //Set a custom flag so that the dataUpdated event doesn't fire infinitely, in case you have 
     //a dataUpdated event of your own 
     legendEvent.chart.toggleLegend = true; 
     // The following toggles the markers on and off. 
     // The only way to "hide" a column and reserved space on the axis is to remove it 
     // completely from the dataProvider. You'll want to use the hidden flag as a means 
     // to store/retrieve the object as needed and then sort it back to its original location 
     // on the chart using the dataIdx property in the init handler 
     if (undefined !== legendEvent.dataItem.hidden && legendEvent.dataItem.hidden) { 
     legendEvent.dataItem.hidden = false; 
     dataProvider.push(legendEvent.dataItem.storedObj); 
     legendEvent.dataItem.storedObj = undefined; 
     //re-sort the array by dataIdx so it comes back in the right order. 
     dataProvider.sort(function(lhs, rhs) { 
      return lhs.dataIdx - rhs.dataIdx; 
     }); 
     } else { 
     // toggle the marker off 
     legendEvent.dataItem.hidden = true; 
     //get the index of the data item from the data provider, using the 
     //dataIdx property. 
     for (var i = 0; i < dataProvider.length; ++i) { 
      if (dataProvider[i].dataIdx === legendEvent.dataItem.dataIdx) { 
      itemIndex = i; 
      break; 
      } 
     } 
     //store the object into the dataItem 
     legendEvent.dataItem.storedObj = dataProvider[itemIndex]; 
     //remove it 
     dataProvider.splice(itemIndex, 1); 
     } 
     legendEvent.chart.validateData(); //redraw the chart 
    } 

    //check if legend is enabled and custom generateFromData property 
    //is set before running 
    if (!chart.legend || !chart.legend.enabled || !chart.legend.generateFromData) { 
    return; 
    } 

    var categoryField = chart.categoryField; 
    var colorField = chart.graphs[0].lineColorField || chart.graphs[0].fillColorsField; 
    var legendData = chart.dataProvider.map(function(data, idx) { 
    var markerData = { 
     "title": data[categoryField] + ": " + data[chart.graphs[0].valueField], 
     "color": data[colorField], 
     "dataIdx": idx 
    }; 
    if (!markerData.color) { 
     markerData.color = chart.graphs[0].lineColor; 
    } 
    data.dataIdx = idx; 
    return markerData; 
    }); 

    chart.legend.data = legendData; 

    //make the markers toggleable 
    chart.legend.switchable = true; 
    chart.legend.addListener("clickMarker", handleCustomMarkerToggle); 

}, ["serial"]); 

Demo