【数据可视化】【highcharts】多轴x轴改为日期格式--实例

最新推荐文章于 2023-09-04 00:55:06 发布

用一个中文龜

最新推荐文章于 2023-09-04 00:55:06 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：数据可视化文章标签： js对象

本文链接：https://blog.youkuaiyun.com/qq_35085956/article/details/79071865

数据可视化专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在Highcharts中将多轴X轴设置为日期格式，适用于数据可视化的场景。通过实例展示，作者h.k在2018年1月16日分享了这一知识，强调个人知识梳理，转载请注明出处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据可视化

highcharts

实例

时间轴 -> X-axis
多组测量数据轴 -> 多个Y-axis

    var optionView = {
        //chart 属性 包括 图表背景
        chart: {
            type: 'line',
            backgroundColor: 'rgba(0,0,0,0)'
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        //在X-axis 设置X-axis 属性，eg. 日期格式
        xAxis: {
            type: 'datetime',
            lineWidth: 0,
            tickWidth: 0,
            labels: {
                enabled: true
            }
        },
        //针对不同类型图表的配置
        //eg. pointStart，pointInterval
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: true
                },
                pointStart: Date.UTC(startTime),
                pointInterval: 4 * 3600 * 1000 // one day
            }
        },
        //多Y-axis 使用{[Y0],[Y1]}区分
        //tickPositions ：尺度
        yAxis: [{
                tickPositions: [30, 32, 34, 36, 38, 40, 42],
                gridLineColor: '#C0C0C0',
                gridLineDashStyle: 'solid',
                gridLineWidth: '0',
                lineColor: '#ffffff',
                title: {
                    text: ''
                },
                labels: {
                    enabled: true
                }
            }, {
                tickPositions: [40, 70, 100, 130, 160, 190, 220],
                gridLineColor: '#C0C0C0',
                gridLineDashStyle: 'solid',
                gridLineWidth: '0',
                lineColor: '#ffffff',
                title: {
                    text: ''
                },
                labels: {
                    enabled: true
                }
            }, {
                tickPositions: [40, 60, 80, 100, 120, 140, 160],
                gridLineColor: '#C0C0C0',
                gridLineDashStyle: 'solid',
                gridLineWidth: '0',
                lineColor: '#ffffff',
                title: {
                    text: ''
                },
                labels: {
                    enabled: true
                }
            }],
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            enabled: true
        },
        //版权信息
        credits: {
            enabled: true,
            text: "h.k 2018年1月15日"
        },
        //导出
        exporting: {
            enabled: true
        },
        //series 为数据载体对象
        //对应设定的多个Y-Axis 使用[yAxis：下标int]对应
        //数据格式改为 data:[[x1,y1],[x2,y2]]
        series: [{
                yAxis: 0,
                name: '',
                color: 'none',
                data: dataTW
            }, {
                yAxis: 1,
                name: '',
                data: dataMB
            }, {
                yAxis: 2,
                name: '',
                color: '#00ff00',
                data: dataXY_high
            }, {
                yAxis: 2,
                name: '',
                color: '#00ff00',
                data: dataXY_low
            }],
        responsive: {
            rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
        }
    }

    var charts = Highcharts.chart('container', optionView);