Highchart从CSV文件用JavaScript [英] Highchart from CSV file with JavaScript

问题描述

我制作了一个JavaScript函数，用于从一个CSV文件中读取一个Highchart。

 < script& 
 function Showgraph（）{
 var options = {
 chart：{
 renderTo：'container'，
 defaultSeriesType：'line'
}，
 title：{
 text：'测量数据'
}，
 xAxis：{
 categories：[]，
 title：{
 text ：'Measurement number'
}，
 labels：{
 enable：false，
y：20，rotation：-45，allign：'right'
} 
}，
 yAxis：{
 title：{
 text：'Retro Reflection'
} 
}，
系列：[] 
}; 
 
 $ .get（'data.csv'，function（data）{
 //拆分行
 var lines = data.split（'\\\
'）; 
 
 //迭代这些行并添加类别或系列
 $ .each（lines，function（lineNo，line）{
 var items = line.split（' ）; 
 
 //标题行包含类别
 if（lineNo == 0）{
 $ .each（items，function（itemNo，item）{
 if （itemNo> 0）options.xAxis.categories.push（item）; 
}）; 
} 
 
 //其余行包含带有名称的数据第一个
 // position 
 else {
 var series = {
 data：[] 
}; 
 $ .each（items，function ，item）{
 if（itemNo == 0）{
 series.name = item; 
} else {
 series.data.push（parseFloat（item））; 
} 
}）; 
 
 options.series.push（series）; 
 
} 
 
}）; 
 
 //创建图表
 var chart = new Highcharts.Chart（options）; 
}）
} 
< / script> 
  

x为数字的CSV档案。

  Categories，xxx，
 0.2，xxx，
 0.33，xxx，
 0.5，xxx，
 0.7，xxx，
 1.0，xxx，
 1.5，xxx，
 2.0，xxx，
  

然后我想从CSV文件中删除值：Categories，xxx，并修改JavaScript函数，使其仍然可以工作，但图表在X轴上不显示任何值。

新的CSV档案

  0.2，xxx，
 0.33，xxx，
 0.5，xxx，
 0.7，xxx，
 1.0，xxx，
 1.5，xxx，
 2.0，xxx，
  / pre> 
 
 
基本上从最后的CSV文件创建Highchart。
解决方案
使用这个解析器：
  $。each（lines，function（lineNo，line）{
 var items = line.split（'，'）; 
 
 
 var series = {
 data：[] 
}; 
 $ .each ，function（itemNo，item）{
 series.data.push（parseFloat（item））; 
}）; 
 
 options.series.push（series）; 
 
 
}）; 
  
并移除类别：[]  xAxis选项。
 
I made a JavaScript function that makes a Highchart, reading from a CSV file.
<script>
function Showgraph(){
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'line'
    },
    title: {
        text: 'Measurement data'
    },
    xAxis: {
        categories: [],
        title: {
            text: 'Measurement number'
            },
            labels: {
                enable: false,
            y:20, rotation: -45, allign: 'right'
            }
    },
    yAxis: {
        title: {
            text: 'Retro Reflection'
        }
    },
    series: []
};

$.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('\n');

    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }

        // 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;
                } else {
                    series.data.push(parseFloat(item));
                }
            });

            options.series.push(series);

        }

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
})
}
</script>
The CSV file where the x are numbers.
Categories,xxx,
0.2,xxx,
0.33,xxx,
0.5,xxx,
0.7,xxx,
1.0,xxx,
1.5,xxx,
2.0,xxx,
I would then like to remove the value: Categories, xxx, from the CSV file and modify the JavaScript function so that it still works but the chart doesn't show any values on the X-axis.

The new CSV file
0.2,xxx,
0.33,xxx,
0.5,xxx,
0.7,xxx,
1.0,xxx,
1.5,xxx,
2.0,xxx,
Basically to make a Highchart from the last that CSV file.
解决方案
Use this parser: 
$.each(lines, function(lineNo, line) {
    var items = line.split(',');


        var series = {
            data: []
        };
        $.each(items, function(itemNo, item) {
                series.data.push(parseFloat(item));
        });

        options.series.push(series);


});
And remove a categories: [] from xAxis options.

                        
这篇关于Highchart从CSV文件用JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！