【问题标题】:Highcharts not displaying series data for graph with multiple Y-axesHighcharts 不显示具有多个 Y 轴的图形的系列数据
【发布时间】:2013-05-12 17:25:24
【问题描述】:

我正在尝试显示包含 2 个数据系列的图表。系列 1 是折线图,系列 2 是柱形图。 2 个 Y 轴,每个轴都有不同的刻度。通过查看 HighCharts 网站上的示例,这应该非常简单,并且他们拥有的示例正是我正在寻找的。但是,当我编写代码时,第二个系列的系列数据并没有显示在图表上。

看这里:http://jsfiddle.net/QgHHZ/2/

$(function () {

    var Data = [{
        "name": "Series1",
        "type": "line",
        "data": [40000, 60000, 54000, 58000, 66000]
    }, {
        "name": "Series2",
        "type": "column",
        "yaxis": "1",
        "data": [22300, 44, 22, 12456, 888]
    }]

    var Options = {
        chart: {
            renderTo: "container",
            zoomType: "x"
        },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                },
                animation: true
            },
            column: {
                animation: false
            }
        },
        title: {
            text: "Test"
        },
        legend: {
            enabled: true,
            layout: "vertical",
            align: 'right',
            verticalAlign: 'middle'
        },
        tooltip: {
            enabled: true,
        },
        yAxis: [{
            title: {
                text: 'Series 1'
            },
            min: 35000,
            max: 80000
        }, {
            title: {
                text: 'Series 2'
            },
            min: 0,
            max: 30000,
            opposite: true
        }],
        series: Data
    };


    myChart = new Highcharts.Chart(Options);
});

如果您取出每个 Y 轴的最小值和最大值,两个系列数据都会显示,但右侧的轴标签会消失,就好像第二个系列只是在 y 轴上显示在左边。

我不知道我做错了什么还是一个错误。

有什么想法吗?

【问题讨论】:

    标签: javascript highcharts


    【解决方案1】:

    将yaxis改为yAxis,值必须是数字而不是字符串。

    你有这个:

    {
         "name": "Series2",
         "type": "column",
         "yaxis": "1",
         "data": [22300, 44, 22, 12456, 888]
     }
    

    必须是这样的:

    {
        "name": "Series2",
        "type": "column",
        "yAxis": 1,
        "data": [22300, 44, 22, 12456, 888]
    }]
    

    jsFiddle:http://jsfiddle.net/QgHHZ/5/

    【讨论】:

    • 当然就是这么简单!看太久了,看不出来!谢谢你。
    猜你喜欢
    • 2015-05-18
    • 1970-01-01
    • 1970-01-01
    • 2016-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多