AmCharts v3 有选择地隐藏图表图例项（不是切换图表）

Posted 2023-05-07

【中文标题】AmCharts v3 有选择地隐藏图表图例项（不是切换图表）

【英文标题】：AmCharts v3 selectively hide graph legend item (not toggle graph)

【发布时间】：2022-01-16 14:50:49

【问题描述】：

我支持旧版 amCharts 安装，我需要能够有选择地切换图例项目的可见性。我并不是说使用图例切换图表。我的意思是从图例中删除图例项

用户有一个复选框列表，他们可以在其中选择他们想要显示的图形。到目前为止，所有图表都已渲染，但只是根据用户的选择进行了相应的切换。

现在，我想真正隐藏用户未选择的图表的图例项。与将所有图例项都放在那里相反，但有一些 ON 和一些 OFF。

所以在这里，我想删除所有灰色的项目并留下其余的

虽然调试器在validateData 方法之前暂停，但我可以通过执行此$scope.barChart.graphs[14].legendEntry.hide() 隐藏图例项，但它会在validateData 执行后重新出现。有没有办法防止这种情况再次出现？

在控制台中你可以看到$scope.barChart.graphs[14].legendEntry.hide()

在此屏幕截图中存在加载蒙版，因此对比度较低，但您可以看到 FB Total Views 项目不存在。这就是我所追求的，但理想情况下它们会重新渲染而没有间隙

下面是我的图表配置。

this.barChartOptions = 
    listeners: [
        event: "rendered",
        method: function (e) 

        
    , 
        event: "drawn",
        method: function (e) 
            e.chart.zoomToIndexes(0, 19);
        
    ],
    data: [],
    type: "serial",
    zoomOutText: '',
    titles: [ text: "" ],
    rotate: false,
    zoomOutOnDataUpdate: true,
    fontSize: 14,
    fontFamily: '"Montserrat", sans-serif',
    creditsPosition: "bottom-right",
    autoTransform: false,
    chartScrollbar: 
        enabled: true,
        backgroundColor: scrollbarGBColor,
        selectedBackgroundColor: scrollbarColor,
        dragCursorHover: "cursor: move;",
        dragCursorDown: "cursor: grab;"
    ,
    autoMargins: true,
    marginLeft: 20,
    marginRight: 80,
    marginBottom: 50,
    marginTop: 20,

    pathToImages: '',
    angle: 30,
    depth3D: 0,
    export: 
        enabled: true
    ,
    legend: 
        listeners: [
            "event": "clickMarker",
            "method": function(event) 
              // toggle the marker state
              event.dataItem.hidden = !event.dataItem.hidden; 
              event.chart.validateNow();
            
          ],
        enabled: true,
        useGraphSettings: true,
        divId: "barChartLegenddiv",
        position: "relative",
        bottom: 0,
        valueText: "[[value]]",
        "beforeCapture": function () 

        ,
    ,
    //listeners: [ "event": "init", "method": $scope.addListeners(this) ],
    categoryField: "ClientName",
    categoryAxis: 
        autoWrap: true,
        maxSeries: 0,
        gridPosition: "start",
        parseDates: false,
        labelRotation: 0,
        boldLabels: false

        //labelFunction: function (valueText, serialDataItem, categoryAxis) 
        //    if (valueText.length > 20)
        //        return valueText.substring(0, 20) + '...';
        //    else
        //        return valueText;
        //
    ,
    valueAxes: [
        strictMinMax: true,
        minimum: 0,
        stackType: "none",
        position: "top",
        title: "",
        includeAllValues: true
    ],
        graphs: this.analyticsBarChartGraphs
    ;


this.analyticsBarChartGraphs = [
    
        "valueField": "CustomerViewCount",
        "balloonText": "Customer Photo Views: <b>[[CustomerViewCount]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#a4e4b5",
        "lineColor": "#69bd80",
        "title": "Customer Photo Views",
        "labelOffset": 20,
        "labelText": "[[value]]"
    , 
        "valueField": "OwnerViewCount",
        "balloonText": "Owner Photo Views: <b>[[OwnerViewCount]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#009eff",
        "lineColor": "#004d7c",
        "title": "Owner Photo Views",
        "labelOffset": 20
        , "labelText": "[[value]]"
    , 
        "valueField": "TotalSearches",
        "balloonText": "Total Searches: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#4e8602",
        "lineColor": "#165042",
        "title": "Total Searches",
        "labelText": "[[value]]",
        "labelOffset": 20
    , 
        "valueField": "DirectSearches",
        "balloonText": "Direct Searches: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#4c9900",
        "lineColor": "#004d22",
        "title": "Direct Searches",
        "labelText": "[[value]]",
        "labelOffset": 20
    , 
        "valueField": "DirectionsActions",
        "balloonText": "Directions Actions: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#ff7900",
        "lineColor": "#802f00",
        "title": "Directions Actions",
        "labelText": "[[value]]",
        "labelOffset": 20
    , 
        "valueField": "PhoneCallActions",
        "balloonText": "Phone Call Actions: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#ffc490",
        "lineColor": "#8a670f",
        "title": "Phone Call Actions",
        "labelText": "[[value]]",
        "labelOffset": 20
    , 
        "valueField": "GmbTotalPhotoViews",
        "balloonText": "GMB Total Photo Views: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#fc0000",
        "lineColor": "#a00000",
        "title": "GMB Total Photo Views",
        "labelText": "[[value]]",
        "labelOffset": 20
    ,     // FB items vv
        "valueField": "FBTotalViews",
        "balloonText": "FB Total Views: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#1E4A68",
        "lineColor": "#0b1c28",
        "title": "FB Total Views",
        "labelText": "[[value]]"
    , 
        "valueField": "FBDiscoverySearches",
        "balloonText": "FB Discovery Searches: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#8DC63F",
        "lineColor": "#45621d",
        "title": "FB Discovery Searches",
        "labelText": "[[value]]"
    , 
        "valueField": "FBTotalActions",
        "balloonText": "FB Total Actions: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#F6892B",
        "lineColor": "#ab5407",
        "title": "FB Total Actions",
        "labelText": "[[value]]"
    , 
        "valueField": "FBWebsiteActions",
        "balloonText": "FB Website Actions: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#FFF200",
        "lineColor": "#807900",
        "title": "FB Website Actions",
        "labelText": "[[value]]"
    , 
        "valueField": "FBDirectionsActions",
        "balloonText": "FB Directions Actions: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#FF5E04",
        "lineColor": "#802f00",
        "title": "FB Directions Actions",
        "labelText": "[[value]]"
    , 
        "valueField": "FBPhoneCallActions",
        "balloonText": "FB Phone Call Actions: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#eab73a",
        "lineColor": "#8a670f",
        "title": "FB Phone Call Actions",
        "labelText": "[[value]]"
    , 
        "valueField": "FBLikesTotal",
        "balloonText": "FB Page Likes: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#0000fc",
        "lineColor": "#0000a0",
        "title": "FB Page Likes",
        "labelText": "[[value]]",
    , 
        "valueField": "FBPagePlacesCheckInTotal",
        "balloonText": "FB Phone Call Actions: <b>[[value]]</b>",
        "type": "column",
        "fillAlphas": 0.8,
        "fillColors": "#3f5c98",
        "lineColor": "#0000a0",
        "title": "FB Page Places Check In Total",
        "labelText": "[[value]]"
    , ...
...
...
...
        "valueField": "yelpPhoneCallActions",
        "labelText": "[[value]]",
        "balloonText": "Yelp Phone Call Actions: <b>[[value]]</b>",
        "type": "column",
        "fillColors": "#eab73a",
        "lineColor": "#8a670f",
        "fillAlphas": 0.8,
        "title": "Yelp Phone Call Actions"
    
];

【参考方案1】：

我找到了解决办法，其实很简单hide a legend item：

$scope.barChart.graphs[g].visibleInLegend = false

我遍历了 graph 集合并将它们全部设置为 false，然后在必要时选择性地使它们可见