javascript - 如何在 highcharts 中加载 CSV 文件以外的内容？-6ren

javascript - 如何在 highcharts 中加载 CSV 文件以外的内容？

转载作者：行者123 更新时间：2023-12-01 04:06:50

我正在尝试在 highcharts 中绘制图表，合并 2 个 CSV 文件中的变量。我根据这些例子进行了尝试:load multiple csv files (correct order) in one chart和 load data in highcharts from 2 different csv files但我无法让它工作，网页中什么也没有出现，它只是空白。如果您在 Chrome 中看到错误，则会抛出“Uncaught SyntaxError: Unexpected end of input”。

我真的很感激你能给我的任何帮助。这是我使用的代码和两个示例文件:

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

    <!-- 1. Add these JavaScript inclusions in the head of your page -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/data.js"></script>

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

$(document).ready(function() {

    var c = [];
    var d = []; 
    var e = [];
    var f = [];  


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

// Iterate over the lines and add categories or series    
$.each(lines, function (lineNo, line) {
    var items = line.split(',');
            c.push(items[0]);
            d.push(parseFloat(items[1]));

      //    });     

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

// Iterate over the lines and add categories or series    
$.each(lines, function (lineNo, line) {
   var items = line.split(',');
            e.push(items[2]);
            f.push(parseFloat(items[3]));   

        });       




var chart = new Highcharts.Chart(options);
            },'Text');

var options = {
              chart: {
                     renderTo: 'chart',
                     zoomType: 'xy',
                     },
              title: {
                     text: ''
                     },
              credits: {
                       enabled: true
                       },
              xAxis: {
                     title: {
                            text: 'Fecha'
                            },
                            categories: e
                            },
              yAxis: {
                     title: {
                            text: 'µg/m³'
                            }
                     },      
              series: [{
                       name: 'Puren',
                       data: d
                       }, {  
                       name: 'Ferroviario',
                       data: f    
                       }],

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

 <!-- 3. Add the container -->
 <div id="chart" style="width: 900px; height: 500px; margin: 0 auto">         </div>

 </body>
 </html>

测试1.csv

Date, Puren
18-07-16 0:00,152
18-07-16 2:00,175
18-07-16 4:00,188
18-07-16 6:00,209
18-07-16 8:00,241
18-07-16 10:00,254
18-07-16 12:00,262
18-07-16 14:00,267
18-07-16 16:00,290
18-07-16 18:00,324
18-07-16 20:00,341
18-07-16 22:00,343
19-07-16 0:00,344
19-07-16 2:00,346
19-07-16 4:00,348
19-07-16 6:00,353
19-07-16 8:00,362
19-07-16 10:00,374
19-07-16 12:00,375
19-07-16 14:00,373
19-07-16 16:00,376
19-07-16 18:00,379
19-07-16 20:00,376
19-07-16 22:00,367
21-07-16 0:00,347
21-07-16 2:00,322
21-07-16 4:00,306
21-07-16 6:00,278
21-07-16 8:00,237
21-07-16 10:00,216
21-07-16 12:00,204
21-07-16 14:00,198
21-07-16 16:00,174
21-07-16 18:00,140
21-07-16 20:00,123
21-07-16 22:00,120

test2.csv

Date, Ferroviario
19-07-16 0:00,172
19-07-16 2:00,171
19-07-16 4:00,169
19-07-16 6:00,169
19-07-16 8:00,169
19-07-16 10:00,165
19-07-16 12:00,154
19-07-16 14:00,121
19-07-16 16:00,82
19-07-16 18:00,67
19-07-16 20:00,63
19-07-16 22:00,59
21-07-16 0:00,56
21-07-16 2:00,53
21-07-16 4:00,50
21-07-16 6:00,44
21-07-16 8:00,32
21-07-16 10:00,24
21-07-16 12:00,21
21-07-16 14:00,20
21-07-16 16:00,17
21-07-16 18:00,14
21-07-16 20:00,13
21-07-16 22:00,12
22-07-16 0:00,11
22-07-16 2:00,11
22-07-16 4:00,11
22-07-16 6:00,9
22-07-16 8:00,9
22-07-16 10:00,9
22-07-16 12:00,9
22-07-16 14:00,9
22-07-16 16:00,9
22-07-16 18:00,9
22-07-16 20:00,9
22-07-16 22:00,9

最佳答案

最好的方法是创建您自己的 CSV 解析器。下面的例子:

Array.prototype.concatAll = function() {
  var results = [];
  this.forEach(function(subArray) {
    results.push.apply(results, subArray);
  });

  return results;
};

function csvToData(csv) {
  return csv.split('\n')
    .splice(1)
    .map((line) => line
      .split(',')
      .map((val, i) => {
        if (i === 0) {
          const a = val
            .split(' ')
            .map((s, i) => i === 0 ? s.split('-') : s.split(':')).concatAll().map(s => Number(s))
          return Date.UTC(2000 + a[2], a[1], a[0], a[3], a[4])
        } else {
          return Number(val)
        }
      })
    )
}

const test1_csv = `Date, Puren
18-07-16 0:00,152
18-07-16 2:00,175
18-07-16 4:00,188
18-07-16 6:00,209
18-07-16 8:00,241
18-07-16 10:00,254
18-07-16 12:00,262
18-07-16 14:00,267
18-07-16 16:00,290
18-07-16 18:00,324
18-07-16 20:00,341
18-07-16 22:00,343
19-07-16 0:00,344
19-07-16 2:00,346
19-07-16 4:00,348
19-07-16 6:00,353
19-07-16 8:00,362
19-07-16 10:00,374
19-07-16 12:00,375
19-07-16 14:00,373
19-07-16 16:00,376
19-07-16 18:00,379
19-07-16 20:00,376
19-07-16 22:00,367
21-07-16 0:00,347
21-07-16 2:00,322
21-07-16 4:00,306
21-07-16 6:00,278
21-07-16 8:00,237
21-07-16 10:00,216
21-07-16 12:00,204
21-07-16 14:00,198
21-07-16 16:00,174
21-07-16 18:00,140
21-07-16 20:00,123
21-07-16 22:00,120`
const test2_csv = `Date, Ferroviario
19-07-16 0:00,172
19-07-16 2:00,171
19-07-16 4:00,169
19-07-16 6:00,169
19-07-16 8:00,169
19-07-16 10:00,165
19-07-16 12:00,154
19-07-16 14:00,121
19-07-16 16:00,82
19-07-16 18:00,67
19-07-16 20:00,63
19-07-16 22:00,59
21-07-16 0:00,56
21-07-16 2:00,53
21-07-16 4:00,50
21-07-16 6:00,44
21-07-16 8:00,32
21-07-16 10:00,24
21-07-16 12:00,21
21-07-16 14:00,20
21-07-16 16:00,17
21-07-16 18:00,14
21-07-16 20:00,13
21-07-16 22:00,12
22-07-16 0:00,11
22-07-16 2:00,11
22-07-16 4:00,11
22-07-16 6:00,9
22-07-16 8:00,9
22-07-16 10:00,9
22-07-16 12:00,9
22-07-16 14:00,9
22-07-16 16:00,9
22-07-16 18:00,9
22-07-16 20:00,9
22-07-16 22:00,9`
const data1 = csvToData(test1_csv)
const data2 = csvToData(test2_csv)
const mergedData = [...data1, ...data2]
const options = {
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: mergedData,
    type: 'column'
  }]
}
const chart = Highcharts.chart('container', options);

console.log(data1, data2, mergedData)

实例: https://jsfiddle.net/a9zocb40/

[编辑]实时数据

const options = {
  chart: {
    events: {
      load: function() {
        const chart = this
        const data1 = csvToData(test1_csv)
        const data2 = csvToData(test2_csv)
        const mergedData = [...data1, ...data2].sort((a, b) => a[0] - b[0])
        console.log(data1, data2, mergedData)
        chart.series[0].setData(mergedData)
      }
    }
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: [],
    type: 'column'
  }]
}

const chart = Highcharts.chart('container', options);

实例: https://jsfiddle.net/g8ocqwwr/

关于javascript - 如何在 highcharts 中加载 CSV 文件以外的内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41749274/

文章推荐： javascript - .NET 和 javascript 之间正则表达式 anchor 的差异

文章推荐： python - IP 原型(prototype)字段编号到字符串

文章推荐： amazon-rds - 分配的存储已用完 - 扩展存储以解决

文章推荐： php - Jquery ajax 与 PHP filter_input 函数

highcharts - angular2-highcharts Highcharts 导出模块
如何将导出模块包含到 angular2 应用程序中？我尝试将以下脚本添加到 index.html 但没有任何反应。最佳答案从 Angular CLI 1.0-RC.1 和最新的 angular
highcharts - 下载 highchart 时需要 Highchart 水印图像
我正在为 Web 应用程序使用 HighCharts Javascript 库。当我下载 Highchart 时，我需要 Highchart 水印图像。我正在使用普通的 hicgchart 代码。
highcharts - HighChart 工具提示位置可以更改吗？
我是 highcharts 的新手。默认情况下，Highchart 在图表本身内显示工具提示。这是否可以在图表外部显示工具提示，并显示在与内部显示相同的位置。有帮助吗？最佳答案您可以定义自己的 d
highcharts - Highcharts 热图是否可以在一行中使用日期时间轴？
我正在尝试使用日期时间格式的数据创建 highcharts 热图。数据以小时为单位，持续数天。我不希望图表每天都环绕，但希望所有数据都在一条线上。具体来说，它用于显示每小时的云量百分比，因此每个热图
highcharts - Highcharts 导出按钮不显示
我正在用 angular 中的简单图形来验证 highcharts。但是导出按钮不显示。我在 html 页面中添加脚本: 并在图表中添加属性: export :true, navigat
highcharts - highchart 图表重绘方法不刷新图表
我很想知道为什么按钮 2 在这个 example 中不起作用在这个 jsfiddle 示例中，附加到按钮 1 的“更新”方法正在运行，但在我的原始代码中，“更新”也不起作用。它显示错误:“对象# 没
highcharts - Highchart 工具提示的边框样式
我正在尝试在 highcharts 中编辑工具提示的边框。我遇到的问题是我只想显示底部边框。例如，您可以执行以下操作: tooltip: {borderWidth: 10}//但问题是在整个工具提
highcharts - Highcharts 十字线可以显示在面积图顶部吗？
Highcharts的十字线可以显示在面积图的顶部而不是隐藏在其下方吗？这是问题jsfiddle.net/hHjZb/1286/的示例最佳答案更新: Highcharts现在已经实现了the O
highcharts - Highcharts 在导出中添加图例
在将图表导出为PNG时，我试图在饼图上添加图例。这是我的代码: var chart_23_106; $(document).ready(function () { chart_23_106 = ne
highcharts - Highchart - 如何在半圆饼图中创建附加的图像仪表
带三角规的半圆饼如何在图表顶部创建带有三角形仪表的上述半圆饼图。我的车速表可以工作，但不能满足需要。在highchart api中有没有办法使用三角形作为仪表，而不是车速表？谢谢最佳答案这
highcharts - Highcharts -气泡图需要较大的气泡
我们使用的是Highchart气泡图，但是，当气泡x和y在图中位于同一位置且气泡y较小时，将无法看到或单击得很少的气泡。有什么方法可以先绘制较大的气泡，然后在顶部绘制较小的气泡？还是说较小的始终位于
highcharts - 设置图表宽度， Highcharts
是否可以使用百分比设置 Highcharts 的宽度？每当调整页面大小时，图表应具有足够的响应速度以适合页面大小吗？ One Solution 这里的问题是我有3个图表需要并排显示，每次调整页面大小时
highcharts - 更新基本柱 Highcharts
我在更新基本列 Highcharts 时遇到问题。我从服务器返回的 json 数组是: [{"name":"positive","data":[18,35,32,38]},{"name":"nega
highcharts - highchart 中的重叠列
有没有办法创建重叠的列？例如在 this jsFiddle ，蓝色和红色列应如下所示相互重叠，蓝色在后面，红色在前面。澄清一下，我不想要堆叠的列，蓝色和红色列都应该从 xAxis (y=0) 开始
highcharts - Highcharts 自定义图例
如何自定义图例从对此最佳答案查看 Highcharts legend api 选项。您可以使用所需的 css 进一步自定义。使用适当的 svg 图像(背景颜色取自图表本身) legend: {
highcharts - Highchart 图案填充
我正在尝试使用模式作为列范围以允许条形图工作。图案出现但不使用预定义的图案，所以它只是纯蓝色。通常它使用已定义的条纹图案，并在散点图等上完美运行。这是一个片段，展示了我的意思: Highchar
highcharts - Highcharts 范围选择器可以使用非日期线性范围吗？
我正在使用 HighStock JS 库生成一个图表，该图表使用 xAxis 的线性序列(不是时间序列)。我仍然想使用范围选择器来缩放到我的线性系列中的预定范围。这可能吗？例如；说我的 xAxis
highcharts - 单系列向下钻取到多系列 Highcharts
我需要从一个系列向下钻取到多个系列。但是下钻 id 在一个系列上似乎是唯一的，这意味着我无法从单个系列下钻到多个系列；只有一个。我该如何解决这个问题？最佳答案可以使用 chart.addSingl
highcharts - Highcharts 列标签
我制作了一个带有分组和堆叠列的Highcharts图表，就像在这里的示例http://www.highcharts.com/demo/column-stacked-and-grouped一样。该示例显
highcharts - Highchart 滚动条位置
如何在 highcharts/highstock 中将滚动条位置设置为Left？如图表加载时的图像所示，滚动条自动右对齐。有没有办法将它定位到左侧？最佳答案我们可以通过将 min 设置为 0

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何在 highcharts 中加载 CSV 文件以外的内容？