Нарисуйте более одного графика в цикле loop и chart.js - PullRequest
Новая
       0

Нарисуйте более одного графика в цикле loop и chart.js

0 голосов
/ 31 января 2019

У меня есть файл .json, который содержит мои диаграммы, , как это .Итак, используя jQuery, я получаю данные из json, такие как: 

/* myFunctionThatLoadCharts */
$.getJSON("myfilewithcharts.json", function(data){
   var myCharts = [];
   var ctx = [];
   var typeofChart;
   var dataofChart;
   var optionsofChart;
   var dashboard = document.getElementById("dashboard");

   for (let chart in data.charts){
      var content = "<div id='"+chart+"' class='square'>"+
                       "<canvas id='chart"+chart+"' width='400' height='400'></canvas>"+
                     "</div>";

      dashboard.innerHTML = dashboard.innerHTML + content;
      ctx.push(document.getElementById("chart"+chart).getContext('2d'));

      typeofChart = data.charts[chart].type;
      dataofChart = data.charts[chart].data;
      optionsofChart = data.charts[chart].options;

      myCharts.push(new Chart(ctx[chart], {
         type: typeofChart,
         data: dataofChart,
         options: optionsofChart
      }));

      content = "";
      typeofChart = "";
      dataofChart = "";
      optionsofChart = "";
   }
}

, где

data

- ответ от функции jQuery $ .getJSON,Но проблема в том, что код генерирует только последний график, а не оба.

Эта функция вызывается для тега <body> с атрибутом onload, поэтому <body onload=myFunctionThatLoadCharts()>

1 Ответ

0 голосов
/ 31 января 2019

Понял!

Прежде чем найти решение, я заметил, что хотя в DOM есть элементы для рисования другой графики, код ссылается только на последнюю.Поэтому мне нужно было сначала сгенерировать весь DOM для графики, а затем нарисовать их.

Проблема возникла из-за того, что команда "innerHTML" переписала все элементы DOM, которые взаимодействуют с ним, поэтому я потерял все ссылки на диаграммы.

Теперь у меня есть две функции: одна для генерации DOM, другая для рисования графиков, например: 

/* myFunctionThatGeneratesDOMelements */
var typeofChart = [];
var dataofChart = [];
var optionsofChart = [];
var dashboard = document.getElementById("dashboard");

$.getJSON("myfilewithcharts.json", function(data){
    for (let chart in data.charts){
        var content = "<div id='"+chart+"' class='square'>"+
                        "<canvas id='chart"+chart+"' width='400' height='400'></canvas>"+
                      "</div>";

        dashboard.innerHTML = dashboard.innerHTML + content;

        typeofChart.push(data.charts[chart].type);
        dataofChart.push(data.charts[chart].data);
        optionsofChart.push(data.charts[chart].options);
    }
    drawCharts(typeofChart, dataofChart, optionsofChart);
});

/* myFunctionToDrawCharts */
function drawCharts (toc, doc, ooc) {
   var ctx = [];
   var myCharts = [];

   for(let i = 0; i < toc.length; i++){
       ctx.push($("#chart"+i).get(0).getContext('2d'));
       myCharts.push(new Chart(ctx[i], {
           type: toc[i],
           data: doc[i],
           options: ooc[i]
       }));
   }
}

Другие решения - insertAdjacentHTML () и AppendChild ()

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...