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;
}

以下是结构chartjs的文档 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});

Answer 3

Chart.js数据结构

*原始

*对象

https://www.chartjs.org/docs/master/general/data-structures/

Chart.js - 正确使用对象数组

3 个答案: