具有獨立數據的多個折線圖 Javascript（Chart.js 或 google-vizualisation）

Question

js 和我有兩個數據集：

data1 = [[0,1],[2,3],[5,7]] 和 data2 = [[1,4],[2,6],[5,2],[7,1]]例子。 每個數據列表都包含表示同一圖表上指向 plot 的點的列表。 （x 和 y 值）

我想 plot 完全像這樣： https://www.chartjs.org/samples/latest/charts/line/multi-axis.ZFC35FDC70D5FC69D269883A822C7A53E

但正如您所看到的，我的數據列表沒有相同的 x 或 y 值，它們甚至沒有相同的大小，所以我不能使用常規：

data: {labels = [1,2,3,4,5],
       data = [7,8,3,1,2],
       data = [9,1,2,3,4]}  //for example

如何僅使用 javascript 編碼此圖表（請不要使用 jQuery）？ 我在互聯網上沒有找到任何可能有幫助的東西。 任何建議對我都很重要！

Answer 1

您可以使用散點圖，它接受data作為包含x和y屬性的對象數組。 要將其轉換為折線圖，請在data配置對象中定義showLine: true 。

給定您的數據結構，以下代碼行生成 Chart.js 預期的數據結構。

data1.map(o => ({ x: o[0], y: o[1] }))

請查看下面的可運行代碼片段。

 const data1 = [[0,1],[2,3],[5,7]]; const data2 = [[1,4],[2,6],[5,2],[7,1]]; new Chart('line-chart', { type: "scatter", responsive: true, data: { datasets: [ { data: data1.map(o => ({ x: o[0], y: o[1] })), label: 'Dataset 1', showLine: true, fill: false, borderColor: 'red' }, { data: data2.map(o => ({ x: o[0], y: o[1] })), label: 'Dataset 2', showLine: true, fill: false, borderColor: 'blue' } ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="line-chart" height="80"></canvas>