Question

我目前正在处理高级图表，我很担心高级图表如何使用多个轴，确切地说，我想要有一个辅助轴-y但我不明白它是如何工作的。有人可以向我解释如何添加辅助轴和我最后输入的数据将基于辅助轴？谢谢。

以下是我在jsfiddle中搜索过的多个轴的示例。 http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo-multi-axes/

以下是多轴代码：

yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true

    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }

    }, { // Tertiary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Sea-Level Pressure',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '{value} mb',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true
    }]

Answer 1

太难用字解释所以我创建了带有2个y轴的样本图表，并且我评论了一些与多个yAxis一起使用的重要操作。

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JS代码

Highcharts.chart('container', {
    chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Average Monthly Temperature and Rainfall in Tokyo'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        crosshair: true
    }],

    //Y-Axis is the line on a graph that runs vertically (up-down) through zero.
        //It is used as a reference line so you can measure from it.
    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // Secondary yAxis
        title: {
            text: 'Rainfall',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} mm',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        ////////Notice: importance option
        opposite: true //This option will set position of this axis to the right side
    }],


    tooltip: {
        shared: true
    },
    legend: {
        layout: 'vertical',
        align: 'left',
        x: 120,
        verticalAlign: 'top',
        y: 100,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    },
    series: [{ //Data for Secondary yAxis 
        name: 'Rainfall',
        type: 'column',
        ////////Notice: importance option
        yAxis: 1, //This option will define which yAxis data will runs on, if not set default all data will runs on the 0 yAxis (as left side)
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        tooltip: {
            valueSuffix: ' mm'
        }

    }, { // Data for Primary yAxis
        name: 'Temperature',
        type: 'spline',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        tooltip: {
            valueSuffix: '°C'
        }
    }]
});

我的小提琴：http://jsfiddle.net/nmtri1101/e4Lpdgj8/2/。

希望它对你有用。

Answer 2

在您发布的代码中，您有三个y轴。 Highcharts分别给出这些轴索引0,1,2。当您输入新系列时，您需要根据这些索引告诉highcharts该系列应使用哪个轴。例如，要将数据绑定到降雨量轴，您需要执行以下操作：

series: {
    yAxis: 1,
    data: [0,0.2,0.4]
}

请参阅API for information和以下example from highcharts demos。

多轴如何在highcharts中工作？

2 个答案: