javascript - 为什么 Chart.js 不显示我的输出(const 函数的结果)？

Question

我的问题是 Chart.js 不会显示我的函数生成的数组(我称为“uno”的数组)。图表似乎没有接收到数据，但我确信该函数有输出。您可以在此处查看代码和输出 codepen ，但我也会将其放在下面:

HTML:

<div id="linechartContainer">

    <canvas id="Chartline">

        <canvas>

      </div>

JS:

var myJSON = [

  {
    "": 0,
    "Comune": "BONDENO",
    "PUNTEGGIOSCUOLA1516": 4.25,
    "Value 1": 63,
    "Value 2": 8,
    "Value 3": 17,
    "DANNO": 6,
    "Somma valori": 88,

  },
  {
    "": 1,
    "Comune": "CAVEZZO",
    "PUNTEGGIOSCUOLA1516": 3.75,
    "Value 1": 23,
    "Value 2": 2,
    "Value 3": 9,
    "DANNO": 8,
    "Somma valori": 34,

  }];

const createPlotArray = (data) => {
  let returnArray = [];
  data.forEach(item => {
    const sum = (item["Value 1"] + item["Value 2"]/item['DANNO']);
    returnArray.push(sum);
  });

  return returnArray;
};

var uno =createPlotArray(myJSON)

var datiedu3 = {


"labels": ['Somma lavori incompiuti', 'OO'],
 "datasets": [{
label: 'EEE',
data: [uno],
 backgroundColor: 'rgb(255, 99, 132)',
borderWidth: 1
}]
          };



                                                        function grafo2(dati, opzioni) {
                                                            var grafoline = document.getElementById('Chartline').getContext('2d');
                                                            new Chart(grafoline, {
                                                                type: 'line',
                                                                data: dati,
                                                                options: opzioni

                                                            });
                                                        };

                                    grafo2(datiedu3)

这是怎么回事？

Answer 1

没有理由使用 Codepen 来托管您的示例代码。 SO 片段可以执行相同的操作:

var myArr = [{
    "": 0,
    "Comune": "BONDENO",
    "PUNTEGGIOSCUOLA1516": 4.25,
    "Value 1": 63,
    "Value 2": 8,
    "Value 3": 17,
    "DANNO": 6,
    "Somma valori": 88 },
  { "": 1,
    "Comune": "CAVEZZO",
    "PUNTEGGIOSCUOLA1516": 3.75,
    "Value 1": 23,
    "Value 2": 2,
    "Value 3": 9,
    "DANNO": 8,
    "Somma valori": 34 }];
                         // you need to supply "labels" for each value!
var datiedu3 = {"labels": ['Somma lavori incompiuti','1','2','3','4','5','6'], 
              "datasets": [{label: 'EEE',
                         // data: myArr.map(itm=>itm['Value 1']+itm['Value 2']/itm.DANNO), 
                            data: [2,4,8,16,32,64,10], // enter any array you like!
                            backgroundColor: 'rgb(255, 99, 132)',
                            borderWidth: 1}] 
               };
function grafo2(dati, opzioni) {
  var grafoline = document.getElementById('Chartline').getContext('2d');
  new Chart(grafoline, {type: 'line',data: dati,options: opzioni});
};
// display the data used in dataset[0]:
// console.log(datiedu3.datasets[0].data)
grafo2(datiedu3)

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<div id="linechartContainer">
<canvas id="Chartline"></canvas>
</div>

我将您的函数 createPlotArray() 替换为应用于输入数组 myArr 的简单 .map() 方法。是的，它实际上是一个数组，不是一个 JSON 字符串。

您指定的图表是{type: 'line'...}，因此您不会对没有获得条形图感到惊讶。

而且，顺便说一句，我删除了数据数组 uno 周围的 []。在我的代码中，我什至没有生成这个中间变量，而是将生成的数组作为 data-property 直接放入 datiedu3 对象中。