Javascript HighCharts 解析 CSV

标签 javascript highcharts

我已经通过 stackoverflow 以及 Highcharts 支持尝试了类似的示例,但仍然无法正确显示图表。尝试使用 csv 文件中的数据显示样条图,格式为 小时,温度,如下示例所示:

22,84
23,83
00,82
01,81
02,79
03,77
04,75

这是我当前的 html/javascript:

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

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


    <script type="text/javascript">

    $(document).ready(function() {

    var time = [];
    var temp = [];

    $.get('forecast.csv', function(data) {
               var lines = data.split('\n');
               $.each(lines, function(lineNo, line) {
                var items = line.split(',');
                time.push(parseInt(items[0]));
                temp.push(parseInt(items[1]));
               });
        });

        var options = {
          chart: {
             renderTo: 'container',
              type: 'spline'
          },
          title: {
              text: 'Temperature Forecast'
          },
          xAxis: {
             title: {
                text: 'Hour'
             },
             categories: time
          },      
          yAxis: {
                 title: {
                    text: 'Temperature'
                 }
          },
          series: [{
                 data: temp
          }]
          };                      

    var chart = new Highcharts.Chart(options);

    });

    </script>
</head>

<body>

    <div id="container" style="width: 100%; height: 400px"></div>

</body>

我的图表已显示,但没有数据。有任何想法吗? 谢谢..

最佳答案

您需要添加一个二维数组作为数据。您可以声明一个全局变量并将数据添加到该变量中。

var chartData=[]
    var dataTemp = new Array(parseInt(items[0]), parseInt(items[1]));
chartData.push(dataTemp);

series: [{
                 data: chartData
          }]

关于Javascript HighCharts 解析 CSV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11355526/

相关文章:

javascript - 禁用在黑色像素上绘图

javascript - Highslide JS > Highchart - 我该如何修改?

javascript - dataLabel 未显示在 HighChart 中的每一列上

jquery - 删除打印按钮

javascript - 使用带有分钟、秒和毫秒的 Highcharts 作为数据不起作用

javascript - 当我在 chrome 中切换设备模式时 $http.get 请求失败

javascript - 使用存储插件存储在 annotator.js 中不起作用

javascript - 应禁用表单字段,但单击按钮时应启用表单字段和列,

javascript - 在使用ajax加载的html上运行函数

javascript - 具有嵌入式 Web 服务器的 PhantomJS 仅使用一个 CPU