如何使用Highcharts使用來自數據庫的傳入數據系列制作多個Y軸

Question

實際上，我想要一個圖形，其中將顯示一系列數據，但不顯示單個y軸。但是對於多個y軸，假設我有8個系列的數據，這些數據將在單個圖表中顯示，單個y軸。我希望它具有選擇性，即用戶將打開和關閉流以使其可見或禁用它，與此同時，每個數據系列的軸也將變為可見。 這是所需圖形的鏈接（圖形實際上是我想要的）。

`






<!-- Styles -->
<style>
#chartdiv {
    width   : 140%;
    height  : 800px;
}
.highcharts-credits {

    display: none !important;
}

</style>

<!-- Resources -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>

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


<!-- Chart code --> <script>

        $(function () {
               var lastPart = window.location.pathname.split("/").pop();
                $.getJSON('/demo/Devices/chGraph/'+lastPart, function(data) {
                    // Populate series
                    Xdata = [];
                    Ydata = [];

                    Xdata =  data[0].CHGRAPHUpdatetime.time.split(",");


                    for(i = 0; i< data[0].channelGraph.length; i++) {
                       Ydata[i] = {"name": "", "data":[]};
                        Ydata[i].name = data[0].channelGraph[i].chkey;

                        var listnumber = data[0].channelGraph[i].list.split(',').map(function(item) {
                    return parseInt(item, 10);

                });
                    Ydata[i].data = listnumber




                    }
                       console.log(Ydata);


                var chart = new Highcharts.Chart({
                    chart: {
                          renderTo: container,
                          zoomType: 'xy',
                          panning: true,
                          panKey: 'shift',
                          height:600,
                          width:1000,
                          borderColor: '#EBBA95',
                          borderWidth: 4,
                          spacingTop: 30,
                          spacingBottom: 50,
                          spacingLeft: 100,
                          spacingRight:80
                    },
                    title: {

                            text: 'Monthly Average Temperature'
                           },


                    xAxis: {
                            type: 'varchar',
                            categories: Xdata
                            }, 


                    tooltip: {
                            shared: true,
                            useHTML: true,
                            headerFormat: '<small>{point.key}</small><table>',
                            pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
                            '<td style="text-align: right"><b>{point.y} </b></td></tr>',
                            footerFormat: '</table>',
                            valueDecimals: 2
                            },


                    series:Ydata,


                },


        }) //end ajax call

        }) // end javascfrpt
        $('#getcsv').click(function () {
    alert(chart.getCSV());
          });   



</script>

<!-- HTML -->
<div id="chartdiv" >

</div>

如何根據每個系列數據添加多個y軸。

我們從json獲取數據，上面的代碼僅顯示一個y軸。

我已附上圖表的圖像。 這是實際的圖。

以下是必需的圖形圖像這是必需的圖形。

Answer 1

您最可能需要做的是將yAxis屬性yAxis到yData數組，這樣格式將變為：

[[name: "x", data: [], yAxis: 1], [name: "y", data: [], yAxis: 2] ]

制作一個在每次迭代時將y索引加1的計數器，以便將其分配給其他y軸。

您還需要在圖表中定義的yAxis

   yAxis: [{
        title: {
            text: 'Title 1'
        }
    }, {
    title: {
            text: 'Title 2'
    }
    }, {
    title: {
            text: 'Title 3'
    },
    }],

您可以在此Highcharts演示中找到有關此信息的更多信息

Answer 2

您可以使用此處的高圖表來實現所需的示例，例如多軸 。

基本上，您將yAxis屬性的值指定為對象列表，同時創建Chart對象並且每個對象代表將為專用系列繪制的線的種類。

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
}];

另一件事是串行指定要使用的軸。 我的案例Ydata[i]是一個序列，它必須具有以下結構

{
    name: 'Sea-Level Pressure',
    type: 'spline',
    //number of axis to represent scale. 1 is by default for primary yAxis.
    yAxis: 2, 
    data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
    marker: {
        enabled: false
    },
    dashStyle: 'shortdot',
    tooltip: {
        valueSuffix: ' mb'
    }

}

因此，當您獲取數據作為響應時，將生成具有上述結構的對象的列表Ydata 。

希望能解決您的問題。 這是在官方示例中添加了更多系列后的演示 。