如何使用Highcharts使用来自数据库的传入数据系列制作多个Y轴

Question

Actually the thing is,I want a graph in which the series of data will be shown but not with single y-axis.But with multiple y-axis,let's say i have 8 series of data which will be shown in single chart with single y-axis.What I want it tobe selective ie the user will click the stream on and off to make it visible or disable it,at the same time the axis of each series of data will also get visible. Here is the link of desired graph(the graph what i want actually).

`






<!-- 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>

how to add multiple y axis according to each series data.

we get the data from a json and above code shows only one y axis.

I have attached the image of the graph. This is the actual graph.

following is the required graph image This is required graph.

Answer 1

What you most likely need to do is to add the attribute yAxis to the yData array, so that the format will become:

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

Make a counter which adds 1 to the yAxis index in each iteration so you assign it to a different yAxis.

The yAxis you need to define in the chart as well

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

You can find more information about this in this Highcharts demo

Answer 2

What you want is possible using highcharts here is and example Multiple axes .

Basically you specify value of yAxis property as a list of objects, while creating Chart object and each object represents the kind of line will be drawn for dedicated series.

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

One more thing is to specify in series which axis to be used. I your case Ydata[i] is a series, it must have following structure

{
    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'
    }

}

So when you get data as response generate list Ydata of objects having above structure.

I hope that solves your issue. Here is a demo after adding one more series to official example.