Question

以下示例是一个电池数据记录器，它读取每个时间值具有多个数据值的csv文件并绘制图形。

http://i.stack.imgur.com/9wHJn.jpg

正如你所看到我用左Y轴读取电压，但我想添加另一个独立的右Y轴读取电流，例如。

在我的示例中，右Y轴只是标题Current，但与左Y轴具有相同的比例。我希望这个Y轴独立。

我见过示例http://www.highcharts.com/demo/combo-dual-axes，但我不知道如何调整它，因为我没有使用系列。有谁能够帮我？提前谢谢。

csv数据格式为：

TIMESTR，BAT1，BAT2，BAT3，BAT4，IBAT

1438420746,13.60,13.80,13.60,11.80,5.5

1438420807,13.60,13.69,13.0,11.19,5.7

这是完整的代码：

<!DOCTYPE HTML>
<html>
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Battery Data Logger</title>

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
                <script type="text/javascript">

function getDataFilename(str){
    point = str.lastIndexOf("file=")+4;

    tempString = str.substring(point+1,str.length)
    if (tempString.indexOf("&") == -1){
        return(tempString);
    }
    else{
        return tempString.substring(0,tempString.indexOf("&"));
    }

}

query  = window.location.search;

var dataFilePath = "data/"+getDataFilename(query);

$(function () {


    // Get the CSV and create the chart
    $.get(dataFilePath, function (csv) {

        $('#container').highcharts({

            data: {
                csv: csv
            },

            chart: {
 //               renderTo: 'container',
                zoomType: 'xy',
                panning: true,
                panKey: 'shift',
                marginTop: 100,
 //               spacingRight: 20
            },


            title: {
                text: 'Battery Data Logger MB-40'
            },

            subtitle: {
                text: 'Click and drag in the plot area to zoom in. Hold down shift key to pan.'
            },

            xAxis: {
                type: 'datetime',
                labels: {
                     formatter: function() {
                     return Highcharts.dateFormat('%H:%M - %b %e', parseInt(this.value, 10)*1000);
                    }
                }
            },

            yAxis: [{ // left y axis
                title: {
                    text: "Voltage (V)"
                },
                labels: {
                    align: 'left',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 1);
                    }
                },
                showFirstLabel: false
            }, { // right y axis
                linkedTo: 0,
                gridLineWidth: 0,
                opposite: true,
                title: {
                    text: "Current (A)"
                },
                labels: {
                    align: 'right',
                    x: 3,
                    y: 16,
                    formatter: function() {
                        return Highcharts.numberFormat(this.value, 1);
                    }
                },
                showFirstLabel: false
            }],

            legend: {
                align: 'left',
                verticalAlign: 'top',
                y: 40,
                floating: true,
                borderWidth: 0
            },

            tooltip: {
                formatter: function() {
                        return '<b>'+ this.series.name +'</b><br/>'+
                        Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x*1000) +': '+ this.y;
                }
            },  

            exporting: {
            sourceWidth: 600,
            sourceHeight: 400,
            scale: 1,
                chartOptions: {
                    subtitle: "Battery Data Logger"
                }
            },          

            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                hs.htmlExpand(null, {
                                    pageOrigin: {
                                        x: this.pageX,
                                        y: this.pageY
                                    },
                                    headingText: this.series.name,
                                    maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x*1000) +':<br/> '+
                                        this.y,
                                    width: 200
                                });
                            }
                        }
                    },
                    marker: {
                        lineWidth: 1
                    }
                }
            },

        });
        var i = 1;
    });

});


                </script>
        </head>
        <body>
        <p style="text-align:center;">Please allow the chart to load, it may take up to 30 seconds </p>
        <hr/>           
<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/highcharts.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/modules/data.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/modules/exporting.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />

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

Answer 1

在回调中你可以在serie上调用update（），它应该被分配到右yAxis。

function(chart){
    chart.series[2].update({ //2 is index of serie
        yAxis:1
    });
}

示例：http://jsfiddle.net/ofakeykc/

使用csv文件创建两个独立的Y轴高亮图

1 个答案: