javascript - 如何使用 Highcharts 从数据库传入一系列数据来制作多个 Y 轴

Question

实际上，我想要一个图表，其中将显示一系列数据，但不是用单个 y 轴。而是用多个 y 轴，假设我有 8 个系列的数据，这些数据将以单个 y 轴显示具有单个 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 轴。

我已附上图表的图像。 This is the actual graph.

以下是所需的图形图像 This is required graph.

Answer 1

使用 highcharts 可以实现您想要的效果，例如 Multiple axes .

基本上，您在创建 Chart 对象时将 yAxis 属性的值指定为对象列表，每个对象代表将为专用系列绘制的线条类型。

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。

希望能解决您的问题。这是demo在向官方示例添加又一个系列后。