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

时间：2018-07-15 20:40:54

标签： javascript 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>

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题