具有独立数据的多线图 Javascript (Chart.js 或 google-vizualisation)

问题描述 投票:0回答:1

js和我有两个数据集。

data1 = [[0,1],[2,3],[5,7]]和data2 = [[1,4],[2,6],[5,2],[7,1]]。每个数据列表都包含了代表点的列表,这些点要绘制在一个 一样 图表:(x和y值)。(x和y值)

我想完全像这样的情节 。https:/www.chartjs.orgsampleslatestchartslinemulti-axis.html

但是如你所见,我的数据列表的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)?我没有在互联网上找到任何可能帮助的东西.任何建议对我来说都很重要!

javascript charts google-visualization chart.js
1个回答
1
投票

您可以使用 散点图,接受 data 作为一个包含 xy 属性。要把它变成线图,请定义 showLine: true 里面 data 配置对象。

给定你的数据结构,下面这行代码会产生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>
© www.soinside.com 2019 - 2024. All rights reserved.