Chart.JS Многострочная диаграмма с неизвестными номерами строк из JSON - PullRequest
Новая
       38

Chart.JS Многострочная диаграмма с неизвестными номерами строк из JSON

0 голосов
/ 29 сентября 2019

Я пытаюсь сделать Multi-Linechart с chart.js.У меня есть набор данных JSON из базы данных.Номер набора данных может быть разным.Вот пример (x может быть больше) с данными JSON.

[{"name":"name1","jan":4067.5,"feb":1647,
"mrz":1375,"apr":10191,"mai":0,"jun":28679,"jul":59502},
{"name":"name2","jan":47548,"feb":63280.5,
"mrz":51640.26,"apr":75029,"mai":41137,"jun":89114.26,"jul":77332},
{"name":"name3","jan":38099,"feb":55023.5,
"mrz":62668,"apr":39482,"mai":44193.3,"jun":52826.5,"jul":77072},
{"name":"namex","jan":34930.5,"feb":36831.5,
"mrz":24391,"apr":35051,"mai":38038,"jun":12700,"jul":51080}]

Я сократил пример, в действительности это до декабря.

Я пытаюсь сделать диаграмму с линией для каждого имени.На оси X должны быть месяцы с января по декабрь и продажи по оси Y.

34/5000

1 Ответ

0 голосов
/ 30 сентября 2019

Насколько я понимаю, ваш набор данных будет динамически обновляться.

Вы можете просто изменить свой набор данных, а затем вызвать функцию update().

Например:

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

var canvas = document.getElementById("barChart");
var ctx = canvas.getContext('2d');

var data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
  datasets: [{
      label: "name 1",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(225,0,0,0.4)",
      borderColor: "red",
      borderCapStyle: 'square',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "black",
      pointBackgroundColor: "white",
      pointBorderWidth: 1,
      pointHoverRadius: 8,
      pointHoverBackgroundColor: "yellow",
      pointHoverBorderColor: "brown",
      pointHoverBorderWidth: 2,
      pointRadius: 4,
      pointHitRadius: 10,
      data: [65, 59, 80, 81, 56, 55, 40, ,60,55,30,78]
    }, {
      label: "name 2",
      fill: true,
      lineTension: 0.1,
      backgroundColor: "rgba(167,105,0,0.4)",
      borderColor: "rgb(167, 105, 0)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "white",
      pointBackgroundColor: "black",
      pointBorderWidth: 1,
      pointHoverRadius: 8,
      pointHoverBackgroundColor: "brown",
      pointHoverBorderColor: "yellow",
      pointHoverBorderWidth: 2,
      pointRadius: 4,
      pointHitRadius: 10,
      data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
    }

  ]
};

var options = {
  scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                     display: true,
                     labelString: 'Moola',
                     fontSize: 20 
                  }
            }]            
        }  
};

// Chart declaration:
var myBarChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

Затем, если позже вы захотите обновить свои данные, вы можете просто: 

myBarChart.data.datasets = [{
      label: "name 3",
      fill: true,
      lineTension: 0.1,
      backgroundColor: "rgba(167,105,0,0.4)",
      borderColor: "rgb(167, 105, 0)",
      borderCapStyle: 'butt',
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: 'miter',
      pointBorderColor: "white",
      pointBackgroundColor: "black",
      pointBorderWidth: 1,
      pointHoverRadius: 8,
      pointHoverBackgroundColor: "brown",
      pointHoverBorderColor: "yellow",
      pointHoverBorderWidth: 2,
      pointRadius: 4,
      pointHitRadius: 10,
      data: [10, 20, 60, 95, 64, 78, 90,,70,40,70,89]
    },
    ...............
];

myBarChart.update();

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

...