Привязать динамические c Json данные в диаграмме p ie - PullRequest
Новая
       2

Привязать динамические c Json данные в диаграмме p ie

0 голосов
/ 07 мая 2020

Я использую highcharts и хочу привязать динамические c json данные к p ie диаграмме. Вот мой динамический c строка 

for(i = 0; i < month.length; i++){
    pi_data+='{name:"'+month[i]+'",y: '+ percent[i] +',color: Highcharts.getOptions().colors['+ i 
 +']},';
}

Здесь я генерирую json строка и привязка в p ie параметр данных диаграммы ниже 

{
    type: 'pie',
    name: 'Total Percentage',
    data: [pi_data],
    center: [100, 50],
    size: 100,
    showInLegend: false,
}

Моя возвращаемая строка:

{имя: «Январь», y: 24,78, цвет: Highcharts.getOptions (). colors [0]}, {name: "Февраль", y: 14.69, color: Highcharts.getOptions (). colors [1]}, {name: "March", y: 26.51, color: Highcharts.getOptions (). colors [2]}, {name: "April", y: 34.01, color: Highcharts.getOptions (). colors [3]}

Если я ввожу непосредственно в параметр данных, он работает, но если я помещаю переменную в опции данных (внутри [] в данных :) это не сработает.

Ответы [ 2 ]

2 голосов
/ 07 мая 2020

Думаю, вы хотите, чтобы data был массивом, а не строкой кода JS (что вы получаете из цикла; он также искажен), поэтому вам нужно правильно составить pi_data. Попробуйте это: 

// From the loop I assumed pi_data should be an array.
let pi_data = []

for(i = 0; i < month.length; i++){
    pi_data.push({
        name: month[i],
        y: percent[i],
        color: Highcharts.getOptions().colors[i],
    });
}

{
    type: 'pie',
    name: 'Total Percentage',
    data: pi_data, // No []!
    center: [100, 50],
    size: 100,
    showInLegend: false,
}
2 голосов
/ 07 мая 2020

Неправильный способ форматирования данных. Параметр data принимает массив элементов, где, как и здесь, передается объект.

Попробуйте преобразовать его в следующий формат: 

let pi_data = month.map((item,index) => ({
    name: item.month,
    y: item.percent,
    color:  Highcharts.getOptions().colors[index]
}));

//Result
[
    { name: "January", y: 24.78, color: Highcharts.getOptions().colors[0] },
    { name: "February", y: 14.69 , color: Highcharts.getOptions().colors[1]},
    { name: "March", y: 26.51,color: Highcharts.getOptions().colors[2] },
    { name: "April", y: 34.01,color: Highcharts.getOptions().colors[3] }
  ]

И в параметрах просто укажите этот массив размещен 

{
    type: 'pie',
    name: 'Total Percentage',
    data: pi_data,
    center: [100, 50],
    size: 100,
    showInLegend: false,
}

Fiddle для справки: https://jsfiddle.net/vo3ch9L1/

...