highcharts 如何从以下数据绘制柱形图/条形图或类似时间轴的东西

qxgroojn  于 2023-05-17  发布在  Highcharts
关注(0)|答案(1)|浏览(141)

我有以下数据a

根据上述数据,需要针对辊通过的不同次数绘制具有不同颜色的车辆的时间线,即

我无法Map图表或一些垂直时间线上的数据点
已尝试使用以下 highcharts :
1.柱形图
1.热图
1.树图
但无法产生预期的结果

6rvt4ljy

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

相关问题