Question

我正在尝试在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:选项。那么，我在做错什么，如何在没有正确URL的情况下让Highcharts显示CSV数据？

Answer 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

如何在Highcharts中显示csv数据？

1 个答案: