在折線圖中向下鑽取 Highcharts

Question

我有一個與此類似的場景。

https://jsfiddle.net/31om2f6d/

請注意，繪制在 x 軸上的數據和系列內的數據是 50 個值的列表（在本例中，我提到了 6 個值。）我需要深入了解另外三個表示計數總和的折線圖。 例如，2019.1 中的第 50 點將在鑽取中拆分為三個點，例如 (10,10,30)。 同樣，點的rest也是如此。因此，當我從主頁的折線圖向下鑽取時，應該有3個折線圖。 請幫我解決這個 function。 （下鑽的值也是列表形式。）

注意：我一直在論壇上閱讀，例如鑽取只能在點映射中完成，而不能在串聯映射時完成。 我不確定這是否是確切的行為。 如果是這樣，請告訴我如何 map 一系列 50 個動態數據，並從那里向下鑽取。

任何幫助表示贊賞。 提前致謝。

 Highcharts.setOptions({ colors: [ '#470303', '#c40a0a', '#a34d4d', '#eda4a4' ] }); Highcharts.chart('container-trend', { chart: { type: 'line', }, title: { text: 'Trend' }, exporting: { tableCaption: false, enabled: false }, credits: { enabled: false }, xAxis: { categories: [2019.1, 2019.2, 2019.3, 2019.4, 2019.5, 2019.6] }, yAxis: { title: { text: 'Counts ' } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: true } }, series: [{ name: 'Total Counts', data: [50,70,30,40,50,20] }] });

 .highcharts-figure, .highcharts-data-table table { min-width: 360px; max-width: 800px; margin: 1em auto; }.highcharts-data-table table { font-family: Verdana, sans-serif; border-collapse: collapse; border: 1px solid #EBEBEB; margin: 10px auto; text-align: center; width: 100%; max-width: 500px; }.highcharts-data-table caption { padding: 1em 0; font-size: 1.2em; color: #555; }.highcharts-data-table th { font-weight: 600; padding: 0.5em; }.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption { padding: 0.5em; }.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) { background: #f8f8f8; }.highcharts-data-table tr:hover { background: #f1f7ff; }

 <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> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <figure class="highcharts-figure"> <div id="container-trend" style="min-width: 310px; height: 320px; margin: 0 auto"></div> </figure>

Answer 1

你想在這里實現類似的東西： https://jsfiddle.net/BlackLabel/f4bvud2q/ ？

  series: [{
    name: 'Total Counts',
    data: [{y: 50, drilldown: '2019.1'},70,30,40,50,20]
  }],
    drilldown: {
        series: [{
            name: '2019.1',
            id: '2019.1',
            data: [10, 10, 30]
        }]
    }

API: https://api.highcharts.com/highcharts/drilldown.series