Присвоение структур данных свойствам chartjs, НЕ индивидуально - PullRequest
Новая
       20

Присвоение структур данных свойствам chartjs, НЕ индивидуально

0 голосов
/ 16 марта 2019

Учитывая следующий код с сайта чарджиса [внизу (http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#10-bubble-chart)]), необходимо назначить каждую точку данных индивидуально, что также занимает много места. Скажем, у меня есть все x, y и r всписок. Это своего рода открытый вопрос, и он не ищет ограниченного решения. Как бы я реализовал что-то вроде приведенного ниже псевдокода? 

labelList=['China','Denmark','Germany','Japan']
xlist= [21269017,258702, 3979083,4931877]
ylist = [5.245,7.526,6.994,5.921]
rlist = [15,10,15,15]

datasets: [
    {
      label: labelList,
      data: [{
        x: xlist,
        y: ylist,
        r: rlist
      }]
    }

INSTEAD OF: 

new Chart(document.getElementById("bubble-chart"), {
type: 'bubble',
data: {
  datasets: [
    {
      label: ["China"],
      data: [{
        x: 21269017,
        y: 5.245,
        r: 15
      }]
    }, {
      label: ["Denmark"],
      data: [{
        x: 258702,
        y: 7.526,
        r: 10
      }]
    }, {
      label: ["Germany"],
      data: [{
        x: 3979083,
        y: 6.994,
        r: 15
      }]
    }, {
      label: ["Japan"],
      data: [{
        x: 4931877,
        y: 5.921,
        r: 15
      }]
    }
  ]
},
options: {
  title: {
    display: true,
    text: 'Predicted world population (millions) in 2050'
  }, scales: {
    yAxes: [{ 
      scaleLabel: {
        display: true,
        labelString: "Happiness"
      }
    }],
    xAxes: [{ 
      scaleLabel: {
        display: true,
        labelString: "GDP (PPP)"
      }
    }]
  }
}
});

1 Ответ

1 голос
/ 16 марта 2019

Сначала вам нужно проверить, имеют ли xList, yList, rList и labelList одинаковую длину, иначе, очевидно, мы не сможем этого сделать.

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

labelList = ['China', 'Denmark', 'Germany', 'Japan']
xList = [21269017, 258702, 3979083, 4931877]
yList = [5.245, 7.526, 6.994, 5.921]
rList = [15, 10, 15, 15]

if ([labelList.length, xList.length, yList.length, rList.length].every((v, i, arr) => v == arr[0])) {
  datasets = [...Array(labelList.length).keys()].map(i => ({
    label: labelList[i],
    data: [{
      x: xList[i],
      y: yList[i],
      r: rList[i]
    }]
  }))

  console.log(datasets);
}
...