如何在 Highcharts 中显示 csv 数据？答案

【问题标题】：How do I display csv data in Highcharts?如何在 Highcharts 中显示 csv 数据？
【发布时间】：2019-09-05 11:16:00
【问题描述】：

我正在尝试在我的 Highcharts 图表中显示 csv 文件的数据。

我的方法如下：

export class OutputGraphComponent implements OnInit {

  title = "app";
  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    title: {
      text: title
    },
    subtitle: {
      text: subtitle
    },
    data: {
      csv: 'assets/test.csv'
    },
    plotOptions: {
      series: {
        marker: {
          enabled: false
        }
      }
    }
  };

我的导入看起来像这样：

import * as Highcharts from 'highcharts';
import HC_data from 'highcharts/modules/data';
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";
import * as HighchartsData from "highcharts/modules/data";

//import * as data from "assets/test2.csv";

declare var require: any;
let Boost = require('highcharts/modules/boost');
let noData = require('highcharts/modules/no-data-to-display');
let More = require('highcharts/highcharts-more');
let Data = require('highcharts/modules/data');

Boost(Highcharts);
noData(Highcharts);
More(Highcharts);
HC_data(Highcharts);
Data(Highcharts);

但是，这里的图表只显示：

“没有数据可显示”

现在，我成功尝试的是使用此选项：

csvURL: window.location.origin  + '/assets/test2.csv'

使用 csvUrl 选项时，数据会显示在图表中。

我的问题是，对于我的程序，我需要使用 csv: 选项。那么，我做错了什么，如何让 Highcharts 在没有正确 URL 的情况下显示 csv 数据？

【问题讨论】：

标签： angular highcharts

【解决方案1】：

您需要将 CSV 字符串直接传递给 csv 选项而不是它的路径：

...
import * as data from "../assets/test2.csv";

...
export class AppComponent {
  Highcharts = Highcharts;
  chartOptions = {
    data: {
      csv: data
    }
  };
}

现场演示： https://codesandbox.io/s/angular-tr096

API 参考： https://api.highcharts.com/highcharts/data.csv

【讨论】：