HighCharts多条曲线共用一个坐标轴(ECharts也适用)

crzdg

已于 2022-03-30 11:05:06 修改

阅读量3k

点赞数 1

分类专栏：前端文章标签： javascript

于 2022-03-30 10:33:15 首次发布

本文链接：https://blog.csdn.net/tt_cxy/article/details/123839979

版权

本文介绍了如何在HighCharts和ECharts中实现多条曲线共用同一个X轴，避免因曲线增多导致的坐标轴过多，使图表保持简洁。通过删除X轴的categories并调整series数据结构为二维数组，可以实现坐标轴共享。

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

不想每条曲线都添加一条坐标轴，希望所有的曲线都共用一条X轴时，适用。（当然也能包括共用Y轴）

一开始的代码：每条曲线都对应了一个x轴和一个y轴，曲线多了以后，坐标轴也跟着变多，图会很复杂

var options = {
    title: {
        text: '绘图区'
    },
    xAxis: [{
        title: 'X轴1',
        categories: [2, 4, 6, 8, 10, 12, 14, 16]
    },{
        title: 'X轴2',
        categories: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]
    },{
        title: 'X轴3',
        categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
    }],
    yAxis: [{
        title: {
            text: 'Y轴1'
        }
    },{
        title: {
            text: 'Y轴2'
        }
    },],
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    series: [{

最低0.47元/天解锁文章