Как включить дополнительные столбцы в сгруппированные гистограммы в ChartJS? - PullRequest
Новая
       31

Как включить дополнительные столбцы в сгруппированные гистограммы в ChartJS?

0 голосов
/ 24 декабря 2018

Итак, в настоящее время у меня есть гистограмма в ChartJS, которая использует базу данных для сравнения цен разных компаний по разным размерам (все элементы одинаковы, только разный размер).

База данных выглядела так:

id, компания, price_for_small, price_for_medium, price_for_large, страна

1, "abcd", 20, 30, 40, "США"

... и т. Д.

У меня есть 3 размера, поэтому до сих пор гистограмма имела 3 группы:

Link to image: https://imgur.com/EDb0Fnh

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

Меня попросили сделать две вещи: добавить 4-й размер, что я и сделал.А затем добавьте новый тип элемента в первые 3 размера.Так, например, вместо 1 предмета в 3 размерах, у меня есть Предмет A и Предмет B, оба из которых входят в малый, средний и большой, и A также имеет очень большой размер.Я успешно добавил их в базу данных, и цены работают правильно.Мне просто нужно добавить их в диаграммы.

Поскольку слишком много диаграмм будет выглядеть загроможденным, я хочу сделать следующее: когда пользователь заполняет форму с указанием страны, элемента, размера и т. Д. Я хочуграфик, показывающий только графики для элемента, выбранного пользователем.Таким образом, если они выбирают пункт A, диаграммы показывают пункт A в 4 размерах для этой конкретной страны.Если они выбирают B, он показывает 3 размера для B.

Сначала я попытался просто добавить новый элемент в виде баров в уже существующие диаграммы, но он не работал из-за группировки наборов данных.Сейчас я пытаюсь найти способ показать разные графики в зависимости от выбранного элемента.Это вообще возможно?Извините, новинка в JavaScript.

HTML: 

<canvas width="600" height="480"id="myChart"></canvas>

JS: 

plotGraph();
       var myChart = new Chart(ctx, {
           type: 'bar',
           data: price_data,
           options: chartOptions
   }); 

var ctx = document.getElementById("myChart").getContext('2d');
var company1_data, company2_data, company3_data, price_data, chartOptions;
//Function to plot the bar chart
function plotGraph(){
    company1_data = {
    label : 'Company 1',
    data: [req_comp1.small, req_comp1.medium, req_comp1_large, 
           req_comp1.extra_large],
    borderWidth: 0,
    yAxisID: "y-axis-prices"
};

---- То же самое с двумя другими компаниями ----- 

price_data ={
      labels: ["Small", "Medium", "Large", "Extra Large"],
      datasets: [company1_data, company2_data, company3_data]
...