Question

我有多个Axis Highchart，但我遇到的问题是Scale不适用于Primary Axis，只有Secondary Y Axis scale作为标准。

因此，Line看起来很低而且不可见。

我尝试过使用alignTicks：false但没有帮助。

问题是Y轴上根本没有出现任何比例。

代码： -

$(function () {
var options = {
chart: {
    zoomType: 'xy',
    renderTo: 'container',
    alignTicks: false
},
title: {
    text: 'Job Status'
},

xAxis: [{
    categories: [],
    crosshair: true
}],
yAxis: [{ // Primary yAxis
    labels: {

        style: {
            color: Highcharts.getOptions().colors[2]
        }
    },
    title: {
        text: 'Transaction Count',
        style: {
            color: Highcharts.getOptions().colors[2]
        }
    },
    opposite: true

}, { // Secondary yAxis

    title: {
        text: 'Time',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    },
    labels: {
        format: '{value} min',
        style: {
            color: Highcharts.getOptions().colors[0]
        }
    }

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

        style: {
            color: Highcharts.getOptions().colors[1]
        }
    },
    opposite: true
}],
tooltip: {
    shared: true
},
legend: {
    layout: 'vertical',
    align: 'left',
    x: 80,
    verticalAlign: 'top',
    y: 55,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
    name: 'Rainfall',
    type: 'column',
    yAxis: 1,
    data: []

}, {
    name: 'Temperature',
    type: 'spline',
    data: []

}]
};
$.getJSON("http://localhost:8080/TestQuartz/json/highdefault.json", function (json) {
    options.xAxis[0].categories = json[0]['data'];
    options.series[0] = json[1]; 
    options.series[1] = json[2];
    options.series[0].type = 'column';
    options.series[1].type = 'spline';
    chart = new Highcharts.Chart(options);
});
});

JSON： -

[
{
    "data": [
        "11-Aug 12:03",
        "11-Aug 12:45",
        "11-Aug 13:13",
        "11-Aug 13:53",
        "11-Aug 14:03",
        "11-Aug 14:33",
        "11-Aug 14:54",
        "11-Aug 15:17",
        "11-Aug 15:49",
        "11-Aug 16:07",
        "11-Aug 17:00",
        "11-Aug 17:33"
    ]
},
{
    "data": [
        2300,
        5412,
        25,
        2577,
        2897,
        2812,
        2443,
        2923,
        2790,
        2187,
        2945,
        23
    ]
},
{
    "data": [
        12.4,
        4.56,
        3.8,
        1.2,
        11,
        12.3,
        5.67,
        7.65,
        34.5,
        12.78,
        10.5,
        2.8
    ]
}
]

此致阿沛

Answer 1

我认为这里的问题是你有3个yAxis和2组数据。您将series[0]分配给yAxis[1]，将series[1]默认分配给yAxis[0]。无论如何，当您将数据分配给图表时，实际上是将整个series[n]对象分配给覆盖yAxis分配的json[n]对象。

您需要做的只是更新series[n].data而不是series[n]对象，如：

options.series[0].data = json[1]['data'];
options.series[1].data = json[2]['data'];

请参阅更新的演示here。

主Y轴刻度不在Highcharts中工作

1 个答案: