如何在单击复选框时将行系列扩展为点线?

时间:2017-06-21 09:40:28

标签: highcharts

我有一个来自0-t1区间x的线系列。 如果用户点击图例旁边的检查,我想显示t1-t2(在同一系列中)的扩展虚线。

有人可以建议怎么做吗?

1 个答案:

答案 0 :(得分:1)

您应该能够使用checkboxClick功能更新系列复选框点击: http://api.highcharts.com/highcharts/plotOptions.series.events.checkboxClick http://api.highcharts.com/highcharts/Series.update

您可以使用区域从某个值更改线条的样式: http://api.highcharts.com/highcharts/plotOptions.series.zones

  series: [{
    data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
    showCheckbox: true,
    events: {
      checkboxClick: function() {
        var checkbox = this.checkbox;
        var newData = $.extend([], true, data);
        for (var i = 0; i < 14; i++) {
          newData.push(20 * Math.random());
        }
        if (checkbox.checked) {
          this.update({
            zones: [{
              value: data.length - 1,
            }, {
              dashStyle: 'dash'

            }],
            selected: false,
            zoneAxis: 'x',
            data: newData
          })
        } else {
          this.update({
            zones: [],
            data: data,
            selected: true
          });
        }
      }
    }
  }]

带有区域的图表的实例: http://jsfiddle.net/yavvLvea/3/