通过输入以高图显示多个csv文件 [英] Display multiple csv files in highcharts via input

问题描述

我正在尝试构建一个csv-Highcharts图，可以在该图上选择文件并将其加载到图中. 到目前为止，可以通过输入将一个csv文件加载到图形中

I am trying to build a csv-Highcharts Graph on which I can choose files and load them into the graph. Until now, it's possible to load one csv file into the graph via input

ouput-graph.component.html:

ouput-graph.component.html:

<highcharts-chart
    id="container" 
    [Highcharts]="Highcharts"
    [constructorType]="chartConstructor"
    [options]="chartOptions"
    [callbackFunction]="chartCallback"
    [(update)]=updateFromInput
    [oneToOne]="true"
    style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

<button (click)="update_chart()">Update Chart</button>
<div class="form-group">
    <label for="file">Choose File</label>
    <input type="file" id="file" (change)="update_chart($event)">
</div>

output-graph.component.ts类似于以下代码片段: https://stackblitz.com/edit/angular-q8ubo3?file = src％2Fapp％2Foutput-graph.component.ts

output-graph.component.ts looks like in this snippet: https://stackblitz.com/edit/angular-q8ubo3?file=src%2Fapp%2Foutput-graph.component.ts

我建立了它，以便每次我选择一个文件并单击更新图表"按钮时，它将用新插入的csv文件数据替换图形数据.

I built it so that everytime i choose a file and click the "update chart" button, it replaces the graph data with the newly inserted csv file data.

现在，我的想法是将多个可选的csv文件加载到图形中，以便我可以通过输入选择一个文件，并且该文件不会替换，而是将数据添加到图形中. 我想到实现一个循环，但陷入了如何使用输入来管理我的问题.

Now, my Idea is to load multiple chooseable csv-files into the graph, so that I can choose a file via input and it will not replace, but add the data to the graph. I thought of implementing a loop but got stuck on how I could manage i with the input.

csv数据如下:

我正在尝试以折线图显示多个数据文件，以便可以看到较新/较旧数据之间的差异.

I'm trying to display the multiple data files in a line diagram, so that i can see the difference between the newer/older data.

有人对我如何进行这项工作或最好的方法有任何想法吗?

Does anyone have any Ideas on how I could make this work or what the best approach would be?

推荐答案

您可以使用其他库将CSV文件解析为JSON，例如papaparse.接下来，您可以将数据添加为默认的js对象，并在需要时添加另一个系列.检查示例: https://codesandbox.io/s/angular-se6d7

You can use an additional library to parse the CSV files into JSON - like papaparse. Next, you can add data as a default js object and add another series when needed. Check the example: https://codesandbox.io/s/angular-se6d7

这篇关于通过输入以高图显示多个csv文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！