0

我在将 .csv 文件中的数据加载到 Highcharts 时遇到问题。

我的最终目标是从（真实样本）加载数据

http://maccas.chickenkiller.com/24hr_final.csv

我可以使用中描述的方法的轻微变化将数据放入 highcharts

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);
        });
});
4

1 回答 1

0

我认为这是问题：

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 上创建示例。

于 2013-07-29T11:09:21.817 回答