[英]Drill down in Line Chart Highcharts
I have a scenario as something similar to this.我有一个与此类似的场景。
https://jsfiddle.net/31om2f6d/ https://jsfiddle.net/31om2f6d/
Note that the data plotted in x-axis and data inside series is a list of 50 values (in this example, I have mentioned 6 values.) I need to drilldown into another three line charts which indicates the sum of the counts.请注意,绘制在 x 轴上的数据和系列内的数据是 50 个值的列表(在本例中,我提到了 6 个值。)我需要深入了解另外三个表示计数总和的折线图。 For example, Point 50 in 2019.1 will be split into three points say(10,10,30) in the drilldown.
例如,2019.1 中的第 50 点将在钻取中拆分为三个点,例如 (10,10,30)。 Similarly the rest of the points as well.As a result, there should be 3 line charts when I drilldown from linechart of main page.
同样,点的rest也是如此。因此,当我从主页的折线图向下钻取时,应该有3个折线图。 Kindly help me out with this function.
请帮我解决这个 function。 (The values for the drilldown is in the form of list as well.)
(下钻的值也是列表形式。)
Note: I have been reading in forum like drilldown can be done only in point mapping and not when mapped in series.注意:我一直在论坛上阅读,例如钻取只能在点映射中完成,而不能在串联映射时完成。 I am not sure if that is the exact behaivour.
我不确定这是否是确切的行为。 If so, kindly let me know how we can map a series of 50 dynamic data by points and drilldown from there.
如果是这样,请告诉我如何 map 一系列 50 个动态数据,并从那里向下钻取。
Any help is appreciated.任何帮助表示赞赏。 Thanks in Advance.
提前致谢。
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>
Would you like to achieve something like here: https://jsfiddle.net/BlackLabel/f4bvud2q/ ?你想在这里实现类似的东西: 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 API: https://api.highcharts.com/highcharts/drilldown.series
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.