时间戳

首页 > 解决方案 > 如何通过在 JavaScript 中迭代字典来在 chart.js 的折线图中添加新数据集？

javascript - 如何通过在 JavaScript 中迭代字典来在 chart.js 的折线图中添加新数据集？

问题描述

我正在尝试从charts.js 中显示折线图，它在图中显示通过、失败和跳过的测试用例结果。在这里，我对数据集中的数据数量进行了硬编码。我想通过遍历对象来添加数据点。对象看起来像这样

var temp = {"2020":[1,2,3],
            "2021":[4,5,6]}

下面是我用于折线图的 javascript 函数。

    function GetHealthReport(health,id) {
    console.log(health);
    var Date = Object.keys(health);

    var ctxL = document.getElementById(id).getContext('2d');
    var myLineChart = new Chart(ctxL, {
        type: 'line',
        data: {
            labels: Date,
            datasets: [
                {
                    label:"Pass",
                data: [health[Date[0]][0],health[Date[1]][0],health[Date[2]][0],health[Date[3]][0],health[Date[4]][0]],
                    backgroundColor: [
                        'rgba(71,193,28,0.71)'
                    ]
                },
                {
                    label:"Failed",
                    data: [health[Date[0]][1],health[Date[1]][1],health[Date[2]][1],health[Date[3]][1],health[Date[4]][1]],
                    backgroundColor: [
                        'rgba(212,0,13,0.71)'
                    ]
                },
                {
                    label:"Skipped",
                    data: [health[Date[0]][2],health[Date[1]][2],health[Date[2]][2],health[Date[3]][2],health[Date[4]][2]],
                    backgroundColor: [
                        'rgba(228,78,231,0.56)'
                    ]
                }
            ]
        },
        options: {
            responsive: true
        }
    });


}

标签： javascripthtmlchart.js

解决方案

鉴于变量中的数据可用，您可以按如下health方式提取labels通过。Object.keys()

labels: Object.keys(health),

data可以通过 提取单个数据集的，Object.values()然后是Array.map()。例如，第一数据集的数据定义如下。

data: Object.values(health).map(v => v[0]),

请在下面查看您修改后的可运行代码。

const health = {
  "2020": [1, 2, 3],
  "2021": [4, 5, 6]
}

var myLineChart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: Object.keys(health),
    datasets: [{
        label: "Pass",
        data: Object.values(health).map(v => v[0]),
        backgroundColor: 'rgba(71,193,28, 0.71)',
        borderColor: 'rgb(71,193,28)',
        fill: false
      },
      {
        label: "Failed",
        data: Object.values(health).map(v => v[1]),
        backgroundColor: 'rgba(212,0,13,0.71)',
        borderColor: 'rgb(212,0,13)',
        fill: false
      },
      {
        label: "Skipped",
        data: Object.values(health).map(v => v[2]),
        backgroundColor: 'rgba(228,78,231,0.56)',
        borderColor: 'rgb(228,78,231)',
        fill: false
      }
    ]
  },
  options: {
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

推荐阅读