AmChart：隐藏事件

Question

我正在使用 amChart 和插件 dataLoader 来加载数据和 eventData，所以我有这样的东西：

var defaultStockChartData = {
  "dataLoader": {
    "url": "urlToMyFile.csv",
    "format": "csv",
    "delimiter": ",",
    "useColumnNames": true
  },

  /**
   * data loader for events data
   */
  "eventDataLoader": {
    "url": urlToMyFile.scv,
    "async": true,
    "postProcess": function(data) {
      for (var x in data) {
        var color = "#85CDE6";
        switch (data[x].Type) {
          case 'A':
            color = "#85CDE6";
            break;
          case 'B':
            color = "#85C56E6";
            break;
          default:
            color = "#cccccc";
            break;
        }
        data[x] = {
          "type": "pin",
          "graph": "g1",
          "backgroundColor": color,
          "date": data[x].Date,
          "text": data[x].Type,
          "description": data[x].Description
        };
      }
      return data;
    }
  }
  ...
}

现在我需要做的是一个复选框，它在选中时显示图表上类型为“A”的所有事件，并在未选中时隐藏所有类型为“A”的事件。

我如何访问图表中的事件并按照它们的类型隐藏它们？

Answer 1

执行此操作的更好方法是直接修改事件数据并将每个元素的 graph 属性切换为 null 或原始图形以显示/隐藏它们，这样您就不必绕过图表的项目符号处理缩放和其他事件。例如：

HTML：

<div>
  <label>Hide Event A <input type="checkbox" class="hide-event" data-event="A"></label>
  <label>Hide Event B <input type="checkbox" class="hide-event" data-event="B"></label>
</div>

JS：

//show/hide events based on selected checkbox
Array.prototype.forEach.call(
  document.querySelectorAll('.hide-event'),
  function(checkbox) {
    checkbox.addEventListener('change', function() {
      var event = checkbox.dataset.event;
      chart.dataSets[0].stockEvents.forEach(function(eventItem) {
        if (eventItem.text === event) {
          if (checkbox.checked) {
            //copy graph reference to a dummy value and null out the original graph
            eventItem.oldGraph = eventItem.graph;
            eventItem.graph = null;
          }
          else {
            //restore original graph and null out copy/dummy reference
            eventItem.graph = eventItem.oldGraph;
            eventItem.oldGraph = null;
          }
        }
      });
      chart.validateData(); //redraw the chart
    });
  }
);

下面的完整演示：

var chartData = [];
var eventData = [];
generateChartData();

//show/hide events based on selected checkbox
Array.prototype.forEach.call(
  document.querySelectorAll('.hide-event'),
  function(checkbox) {
    checkbox.addEventListener('change', function() {
      var event = checkbox.dataset.event;
      chart.dataSets[0].stockEvents.forEach(function(eventItem) {
        if (eventItem.text === event) {
          if (checkbox.checked) {
            //copy graph reference to a dummy value and null out the original graph
            eventItem.oldGraph = eventItem.graph;
            eventItem.graph = null;
          }
          else {
            //restore original graph and null out copy/dummy reference
            eventItem.graph = eventItem.oldGraph;
            eventItem.oldGraph = null;
          }
        }
      });
      chart.validateData(); //redraw the chart
    });
  }
);

function generateChartData() {
  var firstDate = new Date( 2012, 0, 1 );
  firstDate.setDate( firstDate.getDate() - 500 );
  firstDate.setHours( 0, 0, 0, 0 );

  for ( var i = 0; i < 500; i++ ) {
    var newDate = new Date( firstDate );
    newDate.setDate( newDate.getDate() + i );

    var a = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
    var b = Math.round( Math.random() * 100000000 );

    chartData.push( {
      "date": newDate,
      "value": a,
      "volume": b
    } );
    if ((i + 1) % 8 === 0) {
      eventData.push({
        "date": newDate,
        "type": "sign",
        "backgroundColor": "#85CDE6",
        "graph": "g1",
        "text": (i + 1) % 5 == 0 ? "B" : "A",
        "description": "Event " + ((i + 1) % 5 == 0 ? "B" : "A") + " at index " + i
      })
    }
  }
}

var chart = AmCharts.makeChart( "chartdiv", {
  "type": "stock",
  "theme": "light",
  "dataSets": [ {
    "color": "#b0de09",
    "fieldMappings": [ {
      "fromField": "value",
      "toField": "value"
    }, {
      "fromField": "volume",
      "toField": "volume"
    } ],
    "dataProvider": chartData,
    "categoryField": "date",
    // EVENTS
    "stockEvents": eventData
  } ],


  "panels": [ {
    "title": "Value",
    "stockGraphs": [ {
      "id": "g1",
      "valueField": "value"
    } ],
    "stockLegend": {
      "valueTextRegular": " ",
      "markerType": "none"
    }
  } ],

  "chartScrollbarSettings": {
    "graph": "g1"
  },

  "chartCursorSettings": {
    "valueBalloonsEnabled": true,
    "graphBulletSize": 1,
    "valueLineBalloonEnabled": true,
    "valueLineEnabled": true,
    "valueLineAlpha": 0.5
  }
} );

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/amstock.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div>
  <label>Hide Event A <input type="checkbox" class="hide-event" data-event="A"></label>
  <label>Hide Event B <input type="checkbox" class="hide-event" data-event="B"></label>
</div>
<div id="chartdiv"></div>												

Answer 2

我没有找到使用 AmChart 的方法，所以我在 javascript 中完成了（不是按类型，但只需要检查值）

首先我需要这个功能：

function hideShowGraphEvent()
    {
        if($("#chxEventA").prop("checked")) 
        {
            $("g.amcharts-graph-bullet").show();
        }
        else
        {
            $("g.amcharts-graph-bullet").hide();
        }
    }

并在您每次选中或取消选中该框时调用它：

$("#chxEventA").change(function() 
    {
        hideShowGraphEvent();
    });

但是如果您使用缩放（像我一样），它会在您缩放时停止工作，因此您需要在每次缩放时调用该函数：

 "listeners" : [
            {
                "event": "zoomed",
                "method": function()
                {
                    hideShowGraphEvent();
                }
            },
...
]