Question

我正在尝试添加3个Y轴，因此每个数据系列都有1个Y轴。

这是我的JSON，有效：

[{ “名称”： “DATA1”， “数据”：[[1361574000000,121201]，[1362006000000,122019]，[1363388400000,122788]，[1363820400000,123740]，[1364511600000,124703]，[1365112800000 ，125618]，[1365544800000,126553]，[1366063200000,127496]，[1366668000000,128500]，[1367272800000,129433]，[1368309600000,130277]，[1368655200000,131267]，[1369346400000,132191]，[1369864800000,133143 ]]}，{ “名称”： “数据2”， “数据”：[[1361574000000,0]，[1362006000000,40.6]，[1363388400000,35.7]，[1363820400000,41.24]，[1364511600000,40.56]，[1365112800000 ，38.96]，[1365544800000,39.8]，[1366063200000,40.58]，[1366668000000,40.79]，[1367272800000,38.06]，[1368309600000,37.95]，[1368655200000,41.31]，[1369346400000,40.16]，[1369864800000,38.79 ]]}，{ “名称”： “DATA3”， “数据”：[[1361574000000,0]，[1362006000000,1.46]，[1363388400000,1.42]，[1363820400000,1.42]，[1364511600000,1.37]，[1365112800000 ，1.41]，[1365544800000,1.41]，[1366063200000,1.35]，[1366668000000,1.45]，[1367272800000,1.36]，[1368309600000,1.36]，[1368655200000,1.36]，[1369346400000,1.37]，[1369864800000,1.359 ]]}，{“N AME “：” DATA4" ， “数据”：[[1361574000000,0]，[1362006000000,59.276]，[1363388400000,50.694]，[1363820400000,58.5608]，[1364511600000,55.5672]，[1365112800000,54.9336]，[1365544800000 ，56.118]，[1366063200000,54.783]，[1366668000000,59.1455]，[1367272800000,51.7616]，[1368309600000,51.612]，[1368655200000,56.1816]，[1369346400000,55.0192]，[1369864800000,52.71561]]}]

JS代码

$(function() {

    $.getJSON('testdata.php', function(data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            title : {
                text : 'Temperature'
            },

            yAxis: [{
                title: {
                    text: 'A'
                }
            }, {
                title: {
                    text: 'B'
                }
            }, {
                title: {
                    text: 'C'
                }
            }, {
                title: {
                    text: 'D'
                }
            }],

            series: [{
                type: 'line',
                name: 'data1',
                data: data1,
        yAxis: 1,
                }
            }, {
                type: 'line',
                name: 'data2',
                yAxis: 2,
                data: data2
            }, {
                type: 'line',
                name: 'data3',
                yAxis: 3,
                data: data3
        }, {
                type: 'line',
                name: 'data4',
                yAxis: 4,
                data: data4
             }]
    });
   });
});

但是，添加多个Y轴后，图表将不会加载。我做错了什么？

Answer 1

yAxis以0开头，而不是1，因此您尝试将最后一个系列设置为非现有系列。

          [{  

           ...

          } ,{
            type: 'line',
            name: 'data4',
            yAxis: 4, // max is 3
            data: data4
         }]

第二个问题是将选项更改为正确的格式（系列名称错误）：

          [{  

           ...

          } ,{
            type: 'line',
            name: 'data4',
            yAxis: 3,
            data: data[3].data //
         }]

Answer 2

它终于有效了！谢谢!!

工作代码（与上面已经说明的JSON结合）：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/stock/highstock.js"></script>
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    <script type="text/javascript">
$(function() {

    $.getJSON('testdata.php', function(data) {
        // Create the chart
        $('#container').highcharts('StockChart', {


            title : {
                text : 'Temperature'
            },

            yAxis: [{
                title: {
                    text: 'A'
                }
            }, {
                title: {
                    text: 'B'
                }
            }, {
                title: {
                    text: 'C'
                }
            }, {
                title: {
                    text: 'D'
                }
            }],

            series: [{
                type: 'line',
                name: 'data1',
                yAxis: 0,
                data: data[0].data,
            }, {
                type: 'line',
                name: 'data2',
                yAxis: 1,
                data: data[1].data
            }, {
                type: 'line',
                name: 'data3',
                yAxis: 2,
                data: data[2].data
            }, {
                type: 'line',
                name: 'data4',
                yAxis: 3,
                data: data[3].data
             }]
    });
   });
});
        </script>
    </head>
    <body>
    <div id="container" style="height: 500px; min-width: 500px"></div>
    </body>
</html>

Highcharts Y轴每系列

2 个答案: