我有以下数据a
根据上述数据,需要针对辊通过的不同次数绘制具有不同颜色的车辆的时间线,即
我无法Map图表或一些垂直时间线上的数据点已尝试使用以下 highcharts :1.柱形图1.热图1.树图但无法产生预期的结果
6rvt4ljy1#
您可以将其设置为只有一列的column-stacked图表:
Highcharts.chart('container', { chart: { type: 'column' }, title: { text: 'Distances', align: 'left', }, xAxis: { categories: [''], }, yAxis: { min: 0, title: { text: 'distance in m' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', textOutline: 'none' } } }, legend: { layour: 'horizontal', anchor: 'right', //x: 0, verticalAlign: 'bottom', borderWidth: 1, shadow: false }, tooltip: { pointFormatter(original){ return `<span style="color:${this.color}">●</span> from: ${this.stackY-this.y} to: ${this.stackY}`; } }, plotOptions: { column: { stacking: 'normal', dataLabels: { //enabled: true } } }, series: [ { name: '2', data: [62], color: 'orange', showInLegend: false }, { name: '1', data: [48], color: 'red', showInLegend: false },{ name: '2', data: [26], color: 'orange', showInLegend: false },{ name: '4', data: [49], color: 'green' },{ name: '3', data: [2], color: 'darkgreen' },{ name: '2', data: [7], color: 'orange', showInLegend: false },{ name: '3', data: [2], color: 'red', showInLegend: false },{ name: '2', data: [45], color: 'orange' },{ name: '1', data: [10], color: 'red' },] });
<div id="container" style="width:250px"></div> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script>
当然,series中的数据可以通过一个函数从原始格式中获取数据并自动化一些结构来生成,例如为图例中已经表示的类别添加showInLegend: false。
series
showInLegend: false
1条答案
按热度按时间6rvt4ljy1#
您可以将其设置为只有一列的column-stacked图表:
当然,
series
中的数据可以通过一个函数从原始格式中获取数据并自动化一些结构来生成,例如为图例中已经表示的类别添加showInLegend: false
。