Display multiple csv files in highcharts via input

问题

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:

<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 looks like in this snippet: https://stackblitz.com/edit/angular-q8ubo3?file=src%2Fapp%2Foutput-graph.component.ts

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.

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.

The csv data looks like this:

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?

回答1:

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

来源：https://stackoverflow.com/questions/57887506/display-multiple-csv-files-in-highcharts-via-input

标签

javascript

angular

csv

Highcharts