Question

我有一个像这样的数据集，其中每个图层本身就是一个图表（下面的示例数据集），下面的图表仅绘制了第一层的第1周。

我想向其中添加一个时间轴（日期选择器和timeSelector（而不是rangeSelector）），这使我可以在交互时显示不同的图层

var dataSequence = [{
      name: 'Week 1',
      data: [1, 2, 2, 1, 1, 2, 2]
    }, {
      name: 'Week 2',
      data: [6, 12, 2, 3, 3, 2, 2]
    }, {
      name: 'Week 3',
      data: [4, 5, 6, 5, 5, 4, 9]
    }, {
      name: 'Week 4',
      data: [5, 5, 6, 6, 5, 6, 6]
    }, {
      name: 'Week 5',
      data: [6, 7, 7, 6, 6, 6, 7]
    }, {
      name: 'Week 6',
      data: [8, 9, 9, 8, 8, 8, 9]
    }, {
      name: 'Week 7',
      data: [9, 10, 4, 10, 9, 9, 9]
    }, {
      name: 'Week 8',
      data: [1, 10, 10, 10, 10, 11, 11]
    }, {
      name: 'Week 9',
      data: [11, 11, 12, 12, 12, 11, 11]
    }];



    $('#container').highcharts({

      chart: {
        type: 'areaspline'
      },
      title: {
        text: 'Highcharts with time control - weeks'
      },
      xAxis: {
        categories: [
          'Monday',
          'Tuesday',
          'Wednesday',
          'Thursday',
          'Friday',
          'Saturday',
          'Sunday'
        ]
      },
      yAxis: {
        title: {
          text: 'Fruit units'
        }
      },
      plotOptions: {
        areaspline: {
          fillOpacity: 0.5
        }
      },
      series: [{
        name: 'By week',
        data: dataSequence[0].data.slice()
      }, {
        name: 'Average week',
        data: [6, 8, 6, 7, 7, 7, 6]
      }]
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

我知道这个运动插件https://www.highcharts.com/blog/tutorials/176-charts-in-motion/，但我正在寻找内置的highchart解决方案。

我可以想象可以使用向下钻取功能来完成某些工作吗？基本上是一个图表，它始终显示向下钻取的序列以及进行交互的时间表。

您有什么建议？有人知道这里有解决方案吗？

谢谢。

Answer 1

您可以添加一些自定义按钮，然后单击使用setData方法来更改当前数据集：

document.getElementById('week3').addEventListener('click', function() {
    chart.series[0].setData(dataSequence[2].data);
});

document.getElementById('week7').addEventListener('click', function() {
    chart.series[0].setData(dataSequence[6].data);
});

实时演示： http://jsfiddle.net/BlackLabel/st12m4hn/

API参考： https://api.highcharts.com/class-reference/Highcharts.Series#setData

没有范围选择器的Highchart多轴timeliine图表

1 个答案: