选择要在 Highcharts 上显示的数据答案

【问题标题】：Choose which data to display on Highcharts选择要在 Highcharts 上显示的数据
【发布时间】：2019-09-03 08:45:37
【问题描述】：

因此，我使用 Angular 将 CSV 加载到 Hicharts 中的常规方法如下：

 export class OutputGraphComponent implements OnInit {
  public options: any = {
    chart: {
      type: 'column'
  },
  data: {
      csvURL: path.to.file
  },
  title: {
      text: window.location.origin 
  },
  yAxis: {
      title: {
          text: 'Units'
      }
  }
  }
  constructor() { }

  ngOnInit(){
    Highcharts.chart('container', this.options);
  }
}

现在，我想做的是选择一个文件，例如像这样的 html 表单，然后在图表中使用它。

<div class="form-group">
  <label for="file">Choose File</label>
  <input type="file"
         id="file"
         (change)="handleFileInput($event.target.files)">
</div>

是否有可能在不重新加载网站的情况下执行此操作？如果没有，我还能如何选择要在 Web 应用程序上加载到 Highcharts 中的文件？

【问题讨论】：

标签： angular highcharts

【解决方案1】：

首先，我建议你使用 highcharts-angular Angular 官方 Highcharts 包装器。可以在这里下载：https://github.com/highcharts/highcharts-angular

现在，在不重新加载页面的情况下检查更新 CSV 数据的示例。可以通过更新chartOptions.data.csv 数据集来完成。

https://codesandbox.io/s/angular-f14bh

API 参考：

https://api.highcharts.com/highcharts/data.csv

【讨论】：