Chart.js - 正確使用對象數組

Question

我正在使用 chart.js 為我的管理面板制作某種圖表，但我不明白如何使用我的 json 對象數組來制作正確的數據集。 我要在數據集的數據字段中放入什么？

提前致謝！ 西蒙娜

這是我的代碼：

var jqxhr = $.ajax({url: api_statistiche, type: "GET",dataType: "json",
data: {type:"top_most_ingredients",n:15}} )
.done(function(json) {
    if (!json) {
        alert( "error 1" );
        return;
    }
    if (json.res!=1 || !json.data) {
        alert( "error 2" );
        return;
    }
    var max=json.data.length;
    var data=[];
    for (i=0;i<max;i++){
        el=json.data[i];
        data[i]={
            label: el.nome,
            value: el.n
            };

    }
    console.log(data); // Show 'data' correctly
var data = {
datasets: [{
    data: ?,

Answer 1

我想你需要這樣的對象...

{label: aPalos[u],
  fillColor: "rgba("+aColoresGraph[u]+",0.05)",
  strokeColor: "rgba("+aColoresGraph[u]+",0.8)",
  pointColor: "rgba("+aColoresGraph[u]+",0.8)",
  pointStrokeColor: "#fff",
  pointHighlightFill: "#fff",
  pointHighlightStroke: "rgba("+aColoresGraph[u]+",0.8)",
  data: aPorcentajes[u]
}

如果有助於更好地理解它，我在這里留下我的方法

    _generarLineChart(){
  var datos = this.props.historial;
  var len = datos.length;

  var aNameS = [];
  var objHits = [];
  var dataL = {};
  var aPorcentajes = [
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    []
  ];
  for (var i=0;i<len;i++){
    if(datos[i].selected){
      let nombre = datos[i].data.trainingSession.name;
      let field = datos[i].data.trainingSession.field;
      let round = datos[i].data.trainingSession.round;
      if(nombre){
        aNameS.push(nombre + ' - Round ' + round + ' ' + field);
      } else {
        aNameS.push(field);
      }

      let hits = datos[i].data.hits;
      for (var k=0;k<10;k++){
        let porcent;
        let hit = hits[k][1];
        if(hit == 0){
          porcent = 100;
        } else{
          porcent = parseInt((hits[k][0] / hits[k][1]) * 100);
        }
        aPorcentajes[k].push(porcent);
      }

    }
  }


  for (var u=0;u<10;u++){
    objHits.push({label: aPalos[u],
      fillColor: "rgba("+aColoresGraph[u]+",0.05)",
      strokeColor: "rgba("+aColoresGraph[u]+",0.8)",
      pointColor: "rgba("+aColoresGraph[u]+",0.8)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba("+aColoresGraph[u]+",0.8)",
      data: aPorcentajes[u]
    });
  }
  dataL['labels'] = aNameS;
  dataL['datasets'] = objHits;
  return dataL;
}

這是結構 chartsjs http://www.chartjs.org/docs/#bar-chart-data-structure的文檔

Answer 2

謝謝！

已解決：

var data=[];
data['labels']=[];
data['datasets']=[];
data['datasets'][0]={
    data: [],
    backgroundColor: [],
    borderColor: "rgba(0,0,0,0)",
    label: 'Like'
};
for (i=0;i<max;i++){
    el=json.data[i];
    data['labels'][i]=el.nome;
    data['datasets'][0].data[i]=el.n;
    data['datasets'][0].backgroundColor[i]=getRandomColor();
}

var ctx = document.getElementById("more_like_ingredients");
var myNewChart = new Chart(ctx,{type: 'polarArea',data: data});