javascript - 选择列并在 amcharts 中突出显示它们

Question

我有一个序列 amcharts，上面有 2 个(可能更多)图表。我正在尝试选择该列并突出显示它们。引用这两个问题:

1. Highlighting a bar

2. Amcharts Guide

应通过单击突出显示该列，并突出显示该列中的图形项目，就像突出显示条形图中的条形一样。如何通过单击选择整个列以及图形项目？

这个 jsfiddle 用于 amcharts 图表。 JSFIDDLE

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "usePrefixes": true,
  "legend": {
    "useGraphSettings": true,
    "position": "top"
  },
  "dataProvider": [
  {
      "200": "3875",
      "month": "JAN",
      "205": "310"
    },
    {
      "200": "3500",
      "month": "FEB",
      "205": "280"
    },
    {
      "200": "3875",
      "month": "MAR",
      "205": "310"
    },
    {
      "200": "3750",
      "month": "APR",
      "205": "300"
    },
    {
      "200": "3875",
      "month": "MAY",
      "205": "310"
    },
    {
      "200": "3750",
      "month": "JUN",
      "205": "300"
    },
    {
      "200": "3875",
      "month": "JUL",
      "205": "310"
    },
    {
      "200": "250",
      "month": "AUG",
      "205": "20"
    },
    {
      "200": "0",
      "month": "SEP",
      "205": "0"
    },
    {
      "200": "0",
      "month": "OCT",
      "205": "0"
    },
    {
      "200": "0",
      "month": "NOV",
      "205": "0"
    },
    {
      "200": "0",
      "month": "DEC",
      "205": "0"
    }
  ],
  "valueAxes": [{
    "axisAlpha": 1,
    "axisColor": "#cccccc",
    "gridCount": 10,
    "position": "left",
    "title": "Place taken",
    "dashLength": 5,
    "axisThickness": 2,
    "tickLength": 0

  }],
  "startDuration": 0.5,
  "graphs": [{
    "balloonText": "[[value]]",
    "bullet": "round",
    "title": "200",
    "valueField": "200",
    "fillAlphas": 0
  }, {
    "balloonText": "[[value]]",
    "bullet": "round",
    "title": "205",
    "valueField": "205",
    "fillAlphas": 0
  }],
  "chartCursor": {
    "pan": false,
    "valueLineEnabled": false,
    "valueLineBalloonEnabled": false,
    "cursorAlpha": 1,
    "cursorColor": "#e2e2d9",
    "color": "black",
    "valueLineAlpha": 1,
    "valueZoomable": true,
    "fullWidth": true
  },
  "categoryField": "month",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 1,
    "axisThickness": 2,
    "axisColor": "#cccccc",
    "fillAlpha": 0.01,
    "fillColor": "#000000",
    "gridAlpha": 0,
    "position": "bottom",
    "tickLength": 0

  },
  "export": {
    "enabled": false
  },
  "listeners": [{
    "event": "init",
    "method": function(e) {
      e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);

      /**
       * Add click event on the plot area
       */
      e.chart.chartDiv.addEventListener("click", function() {
        // we track cursor's last known position by "changed" event
        if (e.chart.lastCursorPosition !== undefined) {
          // get date of the last known cursor position
          var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];

          // create a new guide or update position of the previous one
          if (e.chart.categoryAxis.guides.length === 0) {
            var guide = new AmCharts.Guide();
            guide.category = month;
            guide.toCategory = month;
            guide.lineAlpha = 1;
            guide.lineColor = "#c44";
            guide.expand = true;
            guide.inside = true;
            guide.fillAlpha = 0.2;
            guide.fillColor = "#CC0000";
            e.chart.categoryAxis.addGuide(guide);
          } else {
            e.chart.categoryAxis.guides[0].category = month;
          }
          e.chart.validateData();
        }
      })
      //handle touch screens so that subsequent guides can
      //be added. Requires that the user taps the next
      //point twice. Needed in order to not break zoom/pan
      e.chart.chartDiv.addEventListener("touchend", function() {
        e.chart.tapped = false;
      });
    }
  }, {
    "event": "changed",
    "method": function(e) {
      /**
       * Log cursor's last known position
       */
      e.chart.lastCursorPosition = e.index;
    }
  }],
});

#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/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Answer 1

您可以使用 colorField 组合上述解决方案设置/取消设置以在单击时更改项目符号颜色，因为您使用的是折线图而不是柱形图。

这是使用评论中您的解决方案的更新示例。请注意，我还调整了取消选择处理，以考虑用户是否想要重新选择之前取消选择的字段。为简单起见，我对两个图表使用了相同的 colorField，但您可以随意调整它以满足您的需求。

var pre_month = "";
var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "usePrefixes": true,
  "legend": {
    "useGraphSettings": true,
    "position": "top"
  },
  "dataProvider": [{
      "200": "3875",
      "month": "JAN",
      "205": "310"
    },
    {
      "200": "3500",
      "month": "FEB",
      "205": "280"
    },
    {
      "200": "3875",
      "month": "MAR",
      "205": "310"
    },
    {
      "200": "3750",
      "month": "APR",
      "205": "300"
    },
    {
      "200": "3875",
      "month": "MAY",
      "205": "310"
    },
    {
      "200": "3750",
      "month": "JUN",
      "205": "300"
    },
    {
      "200": "3875",
      "month": "JUL",
      "205": "310"
    },
    {
      "200": "250",
      "month": "AUG",
      "205": "20"
    },
    {
      "200": "0",
      "month": "SEP",
      "205": "0"
    },
    {
      "200": "0",
      "month": "OCT",
      "205": "0"
    },
    {
      "200": "0",
      "month": "NOV",
      "205": "0"
    },
    {
      "200": "0",
      "month": "DEC",
      "205": "0"
    }
  ],
  "valueAxes": [{
    "axisAlpha": 1,
    "axisColor": "#cccccc",
    "gridCount": 10,
    "position": "left",
    "title": "Place taken",
    "dashLength": 5,
    "axisThickness": 2,
    "tickLength": 0

  }],
  "startDuration": 0.5,
  "graphs": [{
    "balloonText": "[[value]]",
    "colorField": "selected",
    "bullet": "round",
    "title": "200",
    "valueField": "200",
    "fillAlphas": 0
  }, {
    "balloonText": "[[value]]",
    "colorField": "selected",
    "bullet": "round",
    "title": "205",
    "valueField": "205",
    "fillAlphas": 0
  }],
  "chartCursor": {
    "pan": false,
    "valueLineEnabled": false,
    "valueLineBalloonEnabled": false,
    "cursorAlpha": 1,
    "cursorColor": "#e2e2d9",
    "color": "black",
    "valueLineAlpha": 1,
    "valueZoomable": true,
    "fullWidth": true
  },
  "categoryField": "month",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 1,
    "axisThickness": 2,
    "axisColor": "#cccccc",
    "fillAlpha": 0.01,
    "fillColor": "#000000",
    "gridAlpha": 0,
    "position": "bottom",
    "tickLength": 0

  },
  "export": {
    "enabled": false
  },
  "listeners": [{
    "event": "init",
    "method": function(e) {
      e.chart.zoomToIndexes(e.chart.dataProvider.length - 40, e.chart.dataProvider.length - 1);

      /**
       * Add click event on the plot area
       */
      e.chart.chartDiv.addEventListener("click", function() {
        // we track cursor's last known position by "changed" event
        if (e.chart.lastCursorPosition !== undefined) {
          // get date of the last known cursor position
          var month = e.chart.dataProvider[e.chart.lastCursorPosition][e.chart.categoryField];

          // create a new guide or update position of the previous one
          if (pre_month === month) {
            e.chart.categoryAxis.guides.pop();
            e.chart.dataProvider[e.chart.lastCursorPosition].selected = undefined;
            pre_month = undefined; //unset so that the user can re-select the current position after de-selecting.
          } else {
            pre_month = month;
            var guide = new AmCharts.Guide();
            e.chart.categoryAxis.guides.pop();
            for (var i = 0; i < e.chart.dataProvider.length; ++i) {
              if (e.chart.dataProvider[i].selected) {
                e.chart.dataProvider[i].selected = undefined; //clear out previously selected line
                break;
              }
            }
            guide.category = month;
            guide.toCategory = month;
            guide.lineAlpha = 1;
            guide.lineColor = "#b6f9ee";
            guide.expand = true;
            guide.inside = true;
            guide.fillAlpha = 0.2;
            guide.lineThickness = 0;
            guide.fillColor = "#b6f9ee";
            e.chart.categoryAxis.addGuide(guide);
            e.chart.dataProvider[e.chart.lastCursorPosition].selected = "#880000";
          }
          e.chart.validateData();
        }
      })
      //handle touch screens so that subsequent guides can
      //be added. Requires that the user taps the next
      //point twice. Needed in order to not break zoom/pan
      e.chart.chartDiv.addEventListener("touchend", function() {
        e.chart.tapped = false;
      });
    }
  }, {
    "event": "changed",
    "method": function(e) {
      /**
       * Log cursor's last known position
       */
      e.chart.lastCursorPosition = e.index;
    }
  }],
});

#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/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>