使用for循环的图表js

Question

HMTL代码：

<div class="col-xl-12 col-lg-7">
    <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary">Evolution of Names vs Dates</h6>
            <div class="dropdown no-arrow">
            </div>
        </div>
        <div class="card-body">
            <div class="container-fluid">
                <canvas id="food_items_line_chart"></canvas>
            </div>
        </div>
    </div>
</div>

Javascript代码：

<script>
 $(document).ready(function () {

  var ctx = $("#my_line_chart");

  var names2 = ['name1', 'name2'];

  var colors2 = ['orange', 'blue'];

  var data2 = [[10,20],[20,30]];

  var dates2 = ['2020-01', '2020-02'];

  var data =
  {
    labels: dates2,
    datasets :
    [
        for (let i = 0; i <= data.length; i++)
        {
            {
                label: names2[i],
                data: data2[i],
                borderColor:
                [
                colors2[i],
                ],
                borderWidth : 1
            },
        }
    ]
  };

  var options = {
    title : {
      display : false,
      position : "top",
      fontSize : 18,
      fontColor : "#111"
    },
    legend : {
      display : true
    },
    scales : {
      yAxes : [{
        ticks : {
          min : 0
        }
      }]
    }
  };

  var chart = new Chart( ctx, {
    type : "line",
    data : data,
    options : options
  });
});
</script>

我刚刚开始学习 javascript 所以我可能做错了很多事情，但我的想法是在 HTML 页面上加载此 ChartJs 折线图。我在检查 HTML 页面时遇到很多错误，第一个错误是：“Uncaught SyntaxError: Unexpected token 'for'”。

Answer 1

您可以使用 Array.map() 将您的数据直接转换为 Chart.js 所需的定义。

请查看您修改后的可运行代码，看看它是如何工作的。

var names2 = ['name1', 'name2'];
var colors2 = ['orange', 'blue'];
var data2 = [[10, 20], [20, 30]];
var dates2 = ['2020-01', '2020-02'];

new Chart('food_items_line_chart', {
  type: 'line',  
  data: {
    labels: dates2,  
    datasets: dates2.map((ds, i) => ({
      label: names2[i],
      data: data2[i],
      borderColor: colors2[i],
      borderWidth: 1
    }))  
  },
  options:  {
    scales: {
      y: {
        min: 0        
      }
    }
  }
});

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

使用for循环的图表js

chart js using for loop

javascript

for-loop

chart.js