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托管您的示例代码。因此，代码片段可以做到这一点：

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/[email protected]"></script>

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

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

您指定的图表为{type: 'line'...}，因此您不会收到条形图也不会感到惊讶。

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