Highcharts 本地 CSV 问题答案

【问题标题】：Highcharts Local CSV IssuesHighcharts 本地 CSV 问题
【发布时间】：2021-10-28 20:47:16
【问题描述】：

我在使用 csv 数据创建 Highcharts 图表时遇到问题。我有以下代码似乎应该可以工作，但它会在我的服务器上生成一个空白图表，我认为这与我提取数据的方式有关。我正在使用 ajax 请求从 csv 文件中提取并绘制点。我的 csv 格式是这样的。

0,0,0,12:45:37
5,26,130,12:45:37
1,28,28,12:45:42
4,35,140,12:45:47
1,32,32,12:45:52
3,16,48,12:45:57
1,29,29,12:46:02
1,25,25,12:46:07
5,16,80,12:46:12
4,35,140,12:46:17
5,25,125,12:46:22
4,37,148,12:46:27

每 30 秒将新点添加到 csv 文件中。

这是我生成空白图表的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>Load cells data</title>


     <!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


     <!-- 2. Add the JavaScript to initialize the chart on document ready -->
     <script type="text/javascript">

       $(document).ready(function() {
        Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

      var t = [];
      var Cell1 = [];
      var Cell2 = [];
      var Cell3 = [];

         $.get('test.csv',function(data) {

         var lines = data.split('\n');
         $.each(lines, function(lineNo, line) {
            var items = line.split(',');
         var date = items[0].split('/');
         Cell1.push([date, parseFloat(items[1])]);
         Cell2.push([date, parseFloat(items[2])]);
         Cell3.push([date, parseFloat(items[0])]);




         });
         var options = {
               chart: {
                    zoomType: 'x',
                  renderTo: 'chart',
                  defaultSeriesType: 'line',
                  animation: Highcharts.svg,
                  events: {
                    load: requestData
                  }
               },
               title: {
                  text: 'Reading chart'
               },
               xAxis: {
                  title: {
                     text: 'Date'
                  },
                  type: 'datetime'
               },
               yAxis: {
                  title: {
                     text: 'kN'
                  }
               },
               series: [{
                  data: Cell1},{data: Cell2
               }, {data: Cell3}],
               //barra vertical que une puntos

        tooltip: {
                backgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1,
                    x3: 0,
                    y3: 2
                },
                stops: [
                    [0, 'rgba(96, 96, 96, .8)'],
                    [1, 'rgba(16, 16, 16, .8)'],
                    [2, 'rgba(50, 50, 50, .8)']
                ]
            },
            borderWidth: 0,
            style: {
                color: '#FFF'
            },
            crosshairs: true,
            shared: true
        },
        // quitar  link Highcharts
        credits: {
            position: {
                align: 'left',
                verticalAlign: 'bottom',
                x: 0,
                y: -10
            },
            style: {
                cursor: 'pointer',
                fontSize: '20px',
                color: 'rgba(0, 0, 0, 0)'
            },
            text: 'R E M t i m er.com',
            href: 'http://Google.com'
        },
    // finn quitar link highcharts

            };
            var chart = new Highcharts.StockChart(options);

            function requestData() {
            $.ajax({
            csv: '\\server\\test.csv',
            success: function(csv) {
                var items = csv.split(',');
                var date = items[0].split('/');

                Cell1 = parseFloat(items[1]),
                Cell2 = parseFloat(items[2]),
                Cell3 = parseFloat(items[3]),
                 point = [date, Cell1];
                 point2 = [date, Cell2];
                 point3 = [date, Cell3];


                  chart.series[0].addPoint(point);
                  chart.series[1].addPoint(point2)
                  chart.series[2].addPoint(point3)

                // call it again after one second
                setTimeout(requestData, 30000);
            },
            cache: false
            });
        }

         });

      });
   </script>
   </head>
   <body>

     <!-- 3. Add the container -->

     <div id="chart" style="width: 800px; height: 400px; margin: 0 auto"></div>

   </body>
</html>

请帮忙。

【问题讨论】：

var date = items[0].split('/'); 应该做什么？ CSV 中没有任何 /。
我把它改成了 var date = items[3];
A 有一张图表要为我打印，但 x 轴没有显示 csv 的第三列，它是一些随机日期。但是，它会在光标悬停时显示正确的时间。
嗨@Jordan Turner，我试图在没有任何服务器请求的情况下重现您的问题，并且您的代码似乎工作正常。请检查此示例：jsfiddle.net/BlackLabel/7183d9xh 您能否更准确地描述问题所在？

标签： javascript csv highcharts

【解决方案1】：

您需要将日期作为时间戳。

由于 csv 日期不包含日期，我建议输入当前日期（但请检查您的要求）。

试试这个（根据 ISO 8601 格式的字符串创建一个新的日期）：

var date = new Date(new Date().toISOString().substr(0,10) + 'T' + items[3])

【讨论】：