Question

我正在从JSON文件创建Chart.js（http://www.chartjs.org/docs/#radar-chart-introduction）。

但我正在使用＆＃34;复选框＆＃34;这样做，想法是点击元素欲望，它将在同一画布内显示不同的数据。

我想我几乎有，但是当我想要保存数据时我遇到了问题。正如你在这里看到的那样，使用console.log我可以通过循环看到数据，并且很好但是当它试图将它保存到数据对象中时，它就错了。

chart.js:25 CSN08101
chart.js:26 rgba(255, 99, 132, 0.2)
chart.js:27 rgba(255,99,132,1)

chart.js:25 CSN08112
chart.js:26 rgba(54, 162, 235, 0.2)
chart.js:27 rgba(54, 162, 235, 1)

chart.js:47 
  Object
    datasets: 
      Array[1] 
        0:Object
          backgroundColor: "rgba(54, 162, 235, 0.2)"
          borderColor: "rgba(54, 162, 235, 1)"
          data: Array[19]
          label: "CSN08112 module"
          __proto__: Object
          length: 1
          __proto__: Array[0]
          labels: Array[19]
          __proto__: Object

chart.js:47 
  Object
    datasets: Array[1]
      0: Object
        backgroundColor: "rgba(54, 162, 235, 0.2)"
        borderColor: "rgba(54, 162, 235, 1)"
        data: Array[19]
        label: "CSN08112 module"
        __proto__: Object
        length: 1
        __proto__: Array[0]
        labels: Array[19]
        __proto__: Object

这是我的代码：

$(function () {
  $('#go').click(function(){

    var checkbox_value = [];
    $(":checkbox").each(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            checkbox_value.push($(this).val());
        }
    });

    var background = ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)",
                      "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)",
                      "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"];

    var border = ["rgba(255,99,132,1)", "rgba(54, 162, 235, 1)",
                      "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)",
                      "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"];

    var data = [];
    for (var m = 0; m < checkbox_value.length; m++) {
      var mid = checkbox_value[m];
      var backid = background[m];
      var bordid = border[m];
      console.log(mid);
      console.log(backid);
      console.log(bordid);
      $.ajax({
        url: "output.php",
        data: { MOD_CODE: mid },
        dataType: 'json',
        success: function(d){
          data[m] = {
            labels:[],
            datasets:[{
              label: mid + ' module',
              backgroundColor: backid,
              borderColor: bordid,
              data:[],
            }]
          };

          for (var i = 0; i < d.length; i++) {
            data[m].labels.push(d[i][0]);
            data[m].datasets[0].data.push(parseFloat(d[i][1]));
          }//.for
        console.log(data[m]);
        }//.success
      }); //.ajax
    } //.for


    // Create the chart with the data collected
    var ctx = document.getElementById("myChart");

    var myChart = new Chart(ctx, {
      type: 'radar',
      data: data,
      options:{
        responsive:false,
        scale:{ticks: {beginAtZero: true}}}});

  })//.click
});//.function

Answer 1

我找到的唯一解决方案是同步显然不是很好，但是如果有人找到另一个解决方案，请随意发布

$(function () {
  $('#go').click(function(){

    var checkbox_value = [];
    $(":checkbox").each(function () {
        var ischecked = $(this).is(":checked");
        if (ischecked) {
            checkbox_value.push($(this).val());
        }
    });

    var background = ["rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)",
                      "rgba(255, 206, 86, 0.2)", "rgba(75, 192, 192, 0.2)",
                      "rgba(153, 102, 255, 0.2)", "rgba(255, 159, 64, 0.2)"];

    var border = ["rgba(255,99,132,1)", "rgba(54, 162, 235, 1)",
                  "rgba(255, 206, 86, 1)", "rgba(75, 192, 192, 1)",
                  "rgba(153, 102, 255, 1)", "rgba(255, 159, 64, 1)"];

    var ddm = 0;
    data = {
      labels:[],
      datasets:[]
    };
    for (var m = 0; m < checkbox_value.length; m++) {
      var mid = checkbox_value[m];
      var backid = background[m];
      var bordid = border[m];

      var ajaxResponse = $.ajax({
        url: "output.php",
        data: { MOD_CODE: mid },
        dataType: 'json',
        async: false,
        success: function(d){

          data.labels = [];
          data.datasets[ddm] = {data:[]};
          for (var i = 0; i < d.length; i++) {
            data.labels.push(d[i][0]);
            data.datasets[ddm].data.push(parseFloat(d[i][1]));
            data.datasets[ddm].label = mid;
            data.datasets[ddm].backgroundColor = backid;
            data.datasets[ddm].borderColor = bordid;
          }//.for
          ddm++;

          if (ddm == checkbox_value.length) {
            console.log(data);
            // Create the chart with the data collected
            var ctx = document.getElementById("myChart");
            var myChart = new Chart(ctx, {
              type: 'radar',
              data: data,
              options:{
                responsive:false,
                scale:{ticks: {beginAtZero: true}}}
            });//.new Chart
          }//.if

        }//.success
      }); //.ajax
    }//.for

  })//.click
});//.function

在chart.js中显示多个数据

1 个答案: