时间戳

首页 > 解决方案 > chartjs数据集从单行到多行

chart.js - chartjs数据集从单行到多行

问题描述

请帮忙，谢谢。我现在正在编写 chartjs 的数据部分

var configcount = {type: "line",data: {
labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
datasets: [{label: "Balance1",
    data: [10, 20, 30, 40, 50, 60, 70],
    fill: false,pointBorderWidth: ...
,},},],},},};

想要更改 Balance1: 10, 20, 30, 40, 50, 60, 70 & Balance2: 15, 30, 15, 30, 15, 30, 15 的多行

标签： chart.js

解决方案

您需要定义两个不同的数据集，如下所示。

data: {
  labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
  datasets: [{
    label: "Balance1",
    data: [10, 20, 30, 40, 50, 60, 70],
    ...
  }, {
    label: "Balance2",
    data: [15, 30, 15, 30, 15, 30, 15],
    fill: false,
    ...
  }]
}

请看一下下面的代码，看看它是如何工作的。

new Chart(document.getElementById("chart"), {
  type: 'line',
  data: {
    labels: ["Apr20", "May20", "Jun20", "Jul20", "Aug20", "Sep20", "Oct20"],
    datasets: [{
      label: "Balance1",
      data: [10, 20, 30, 40, 50, 60, 70],
      fill: false,
      backgroundColor: "rgba(255, 99, 132, 0.2)",
      borderColor: "rgb(255, 99, 132)",
      pointBorderWidth: 10
    }, {
      label: "Balance2",
      data: [15, 30, 15, 30, 15, 30, 15],
      fill: false,
      backgroundColor: "rgba(54, 162, 235, 0.2)",
      borderColor: "rgb(54, 162, 235)",
      pointBorderWidth: 4,
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="chart" height="80"></canvas>

推荐阅读