使用Javascript将系列数据导入HighCharts

Question

我遇到了一个问题，将数据从.csv文件加载到高级图表中。

我的最终目标是从(实际样本)加载数据。

final.csv

中所描述的方法稍有不同，我就可以将数据转换成高级图表。

http://docs.highcharts.com/#preprocesssing-data-from-a-file

问题是，当我使用这种方法时，我无法分离不同的系列轴。

我的数据有系列(参见上面的.csv文件)，其中1组在8-9范围内，3组在23-30范围内，最后一组在350-450范围内。

我的目标是将系列"ORP“移动到第二轴(右侧)，将"pH”移动到第三轴(左侧)。

我对将系列绑定到主轴、次轴和第三轴的选项很有信心，但是我无法以允许的方式将数据加载到系列中。

下面是生成“每日”选项卡图的相关代码位

$(function () {
    var dailychartoptions = {
        credits: {
            enabled: false
            },
        plotOptions: {
            line: {
                marker: {
                    enabled: false
                }
            }
            },
        chart: {
        renderTo: 'dailychart',
            type: 'line',
            marginRight: 130,
            marginBottom: 25,
            zoomType: 'x',
            spacingRight: 2
    },
    title: {
            text: '24hr history',
                x: -20 //center
    },
    subtitle: {
            text: 'Temp',
            x: -20
        },
    xAxis: {
        tickInterval:60,
            categories: []
        },
    yAxis: [{ //Primary [0]
        title: {
            text: 'orp'
        },
        min: 0
    },
    { //Secondary [1]
        title: {
            text: 'Temp'
        },
        opposite: true
    },
    { //Tertiary [2]
        title: {
            text: 'pH'
        },
        opposite: true
        }],
    tooltip: {
            crosshairs: true,
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
//              y: 100,
            borderWidth: 1
        },
    series: []
};

    $.get('24hr_final.csv', function(data) {
// Split the lines
        var lines = data.split('\n');
        $.each(lines, function(lineNo, line) {
            var items = line.split(',');
//Below is an attempt to change UNIX EPOCH to Java EPOCH and load into series1 as a date
            if (lineNo == 0) {
                $.each(items, function(itemNo, item) {
                    if (itemNo > 0) {
                                var javaepoch = (item)/0.001;
                                var date = new Date(javaepoch);
                                dailychartoptions.xAxis.categories.push(date);
                    }
                });
            }
// the rest of the lines contain data with their name in the first position
            else {
                var series = { 
                    data: []
                };
                $.each(items, function(itemNo, item) {
                    if (itemNo == 0) {
                        series.name = item;
// Added the below to try and set the yaxis value                       
                        if (item = 'pH' ) {
                            series.yAxis = 0;
                        }
// Finished mods for axis

                    } else 
                    {
                        series.data.push(parseFloat(item));
                    }
                });
                dailychartoptions.series.push(series);
                }
            });
        var chart = new Highcharts.Chart(dailychartoptions);
        });
});

Answer 1

我想这是个问题：

if (item = 'pH' ) { ... }

当然应该是==。因此，您可以使用更多的if或更好的解决方案:向每个yAxis和ID添加与系列名称相同的内容，例如：

{ //Tertiary [2]
  title: {
    text: 'pH'
   },
   id: 'pH',
   opposite: true
}

然后您可以将系列的名称指定为yAxis：

if (itemNo == 0) {
  series.name = item;                     
  series.yAxis = item;
}

仅此而已。如果您有任何问题-请在jsFiddle上创建示例。