несколько линейных диаграмм с независимыми данными Javascript (Chart. js или google-vizualisation) - PullRequest
Новая
       75

несколько линейных диаграмм с независимыми данными Javascript (Chart. js или google-vizualisation)

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

js и у меня есть два набора данных:

data1 = [[0,1], [2,3], [5,7]] и data2 = [[1,4], [ 2,6], [5,2], [7,1]] например. Каждый список данных содержит списки, которые представляют точки для построения на той же диаграмме. (значения x и y)

Я хочу построить точно так: https://www.chartjs.org/samples/latest/charts/line/multi-axis.html

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

data: {labels = [1,2,3,4,5],
       data = [7,8,3,1,2],
       data = [9,1,2,3,4]}  //for example

Как я могу закодировать эту диаграмму только с помощью javascript (нет jQuery, пожалуйста )? Я не нашел в Inte rnet ничего, что могло бы помочь. Любые предложения будут иметь значение для меня!

1 Ответ

1 голос
/ 08 мая 2020

Вы можете использовать диаграмму разброса , которая принимает data как массив объектов, содержащих свойства x и y. Чтобы превратить его в линейную диаграмму, определите showLine: true внутри объектов конфигурации data.

Учитывая ваши структуры данных, следующая строка кода создает структуру данных, ожидаемую Chart. js. 

data1.map(o => ({ x: o[0], y: o[1] }))

Пожалуйста, посмотрите на приведенный ниже фрагмент исполняемого кода. 

const data1 = [[0,1],[2,3],[5,7]];
const data2 = [[1,4],[2,6],[5,2],[7,1]]; 

new Chart('line-chart', {
  type: "scatter",
  responsive: true,
  data: {
    datasets: [
      {
        data: data1.map(o => ({ x: o[0], y: o[1] })),
        label: 'Dataset 1',
        showLine: true,
        fill: false,
        borderColor: 'red'
      },
      {
        data: data2.map(o => ({ x: o[0], y: o[1] })),
        label: 'Dataset 2',
        showLine: true,
        fill: false,
        borderColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>
...