построить динамический массив для charts.js

1

У меня возникли проблемы с построением массива в js для перехода в charts.js obj. У меня есть следующий массив;

{"Questions":{"name":"Hello World"},"Options":{"inner":{"No":"723","Yes":"6","Maybe":"0"}}}

Который передается функции ниже как "ответ". Я хочу циклически перебирать каждый элемент во внутреннем массиве и строить массив объектов, которые нужно передать в мой chart.js.

function drawChart(response){
    var array = JSON.parse(response)
    var options = array['Options']['inner'];

    for(var option in options){
      var datasetValue = [];

      datasetValue.push = {
          value: parseInt(options[option]),
          color: "#F7464A",
          highlight: "#FF5A5E",
          label: option
      }
    }
    console.log(datasetValue);
    var mydata = {
        datasetValue
    }

    var pieData = [
        {
            value: 300,
            color: "#F7464A",
            highlight: "#FF5A5E",
            label: "Red"
        },
        {
            value: 50,
            color: "#46BFBD",
            highlight: "#5AD3D1",
            label: "Green"
        },
        {
            value: 100,
            color: "#FDB45C",
            highlight: "#FFC870",
            label: "Yellow"
        },
        {
            value: 40,
            color: "#949FB1",
            highlight: "#A8B3C5",
            label: "Grey"
        },
        {
            value: 120,
            color: "#4D5360",
            highlight: "#616774",
            label: "Dark Grey"
        }
    ];
    var ctxOptions = {
        responsive: true,
        legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>",
        showTooltips: false,
    };
    var pie_ctx = document.getElementById("donut").getContext("2d");
    var chart = new Chart(pie_ctx).Doughnut(mydata, ctxOptions);
  }

Вы можете видеть выше, у меня есть два массива, мой динамический массив, который я пытаюсь построить 'datasetValue' и 'pieData'. pieData - это образец, и если я передам этот массив в свою новую диаграмму, массив отлично работает, но в моем datasetValue, похоже, содержится последний элемент, а все объекты, такие как pieData. Heres вывод из моего console.log(datasetValue);

[push: Object]
push
:
Object
color
:
"#F7464A"
highlight
:
"#FF5A5E"
label
:
"Maybe"
value
:
0

Что я делаю, решая перестроить мой массив, чтобы соответствовать формату массива pieData?

Теги:
chart.js

2 ответа

2
Лучший ответ

Я думаю, что datasetValue.push = { является переопределением Array.push функции datasetValue. Попробуйте datasetValue.push( { добавить.

Кроме того, вероятно, что только последнее значение будет добавлено в datasetValue поскольку вы перезагружаете его на каждой итерации:

for(var option in options){
      var datasetValue = [];
  • 0
    Спасибо друг, ты был прав, я переместил это внутрь для. Смотрите мой комментарий ниже
  • 0
    @gsusonline похоже, что вы все еще отменяете функцию push . Что произойдет, если вы попытаетесь переключиться на datasetValue.push( вместо datasetValue.push = ?
Показать ещё 3 комментария
2

Ваш набор данных содержит только последний элемент, потому что вы создаете его в цикле for. Каждый раз, когда вы переходите в цикл for, datasetValue будет воссоздан (установлен в пустой массив), поэтому вы регистрируете только последний элемент. Вы должны создать экземпляр вне цикла for.

var datasetValue = [];
for(var option in options){

  datasetValue.push = {
      value: parseInt(options[option]),
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: option
  }
}
  • 0
    Спасибо, это исправило цикл, так что в моем массиве теперь есть 3 объекта - однако, похоже, что мой график не рисует
  • 0
    Было бы здорово, если бы вы могли создать демо-версию plunker или jsfiddle.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню