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

原创已于 2022-03-30 11:05:06 修改 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

前端专栏收录该内容

2 篇文章

订阅专栏

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

不想每条曲线都添加一条坐标轴，希望所有的曲线都共用一条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: [{
        name: 'trace 1',
        yAxis: 0,
        xAxis: 0,
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'trace 2',
        yAxis: 1,
        xAxis: 1,
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434, 5656, 15682]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
};

改进：删除X轴的categories；并且将series中的data改成一个二维数组（即曲线上的点集合）。此时坐标轴共用了。

var options = {
    title: {
        text: '绘图区'
    },
    xAxis: {
        title: 'X轴',
    },
    yAxis: [{
        title: {
            text: 'Y轴1'
        }
    }],
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    series: [{
        name: 'trace 1',
        data: [[1,43934], [3,52503], [5,57177], [7,69658], [9,97031]]
    }, {
        name: 'trace 2',
        data: [[2,24916], [4,24064], [6,29742], [8,29851], [10,32490]]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }
};