Диаграмма JS пользовательская гистограмма - PullRequest
Новая
       28

Диаграмма JS пользовательская гистограмма

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

Я пытаюсь достичь подобного рода диаграммы. Например, транспортные сборы такси, собираемые в марте с помощью карты и Ca sh (40 долларов США sh и 38 долларов США). Мне нужно отобразить эту полосу с основным цветом и более светлую версию основного цвета. У меня здесь два вопроса. Какой график может соответствовать моим потребностям? Как я могу сделать бар с двумя разными оттенками одного цвета (темно-синий и светло-синий)?

Ожидаемый результат:

Я пробовал с помощью следующего кода, я уверен, что набор данных не включает параметры карты и Ca sh, как я объяснил ранее. 

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Train',
      backgroundColor: "rgba(168, 90, 50,1)",
      data: [50, 40, 23, 45, 67, 78, 23]
    }, {
      label: 'Bus',
      backgroundColor: "rgba(50, 168, 80,1)",
      data: [50, 40, 78, 23, 23, 45, 67]
    }, {
      label: 'Taxi',
      backgroundColor: "rgba(83, 95, 219,1)",
      data: [50, 67, 78, 23, 40, 23, 0]
    }]
};

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
    type: 'bar',
    data: barChartData,
    options: {
        title: {
            display: true,
            text: "Transport Mode"
        },
        tooltips: {
            mode: 'single',
            callbacks: {
                label: function(tooltipItem, data) {

                   var text = data.datasets[tooltipItem.datasetIndex].label;
                   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];                                 

                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }  

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                   } else {
                        label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
                   }   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{                
                 gridLines: { color: "rgba(0, 0, 0, 0)" }
            }],
            yAxes: [{
            }]
        }
    }
});

Спасибо.

Ответы [ 2 ]

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

Параметры, которые вы настроили, верны. Это будет гистограмма. Поскольку вы предоставляете несколько наборов данных для каждого вида транспорта, диаграмма js будет рассматривать это как гистограмму с накоплением. 

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Train',
      backgroundColor: "rgba(168, 90, 50,1)",
      data: [50, 40, 23, 45, 67, 78, 23]
    }, {
      label: 'Bus',
      backgroundColor: "rgba(50, 168, 80,1)",
      data: [50, 40, 78, 23, 23, 45, 67]
    }, {
      label: 'Taxi',
      backgroundColor: "rgba(83, 95, 219,1)",
      data: [50, 67, 78, 23, 40, 23, 0]
    }]
};

var options = {
        title: {
            display: true,
            text: "Transport Mode"
        },
        tooltips: {
            mode: 'single',
            callbacks: {
                label: function(tooltipItem, data) {

                   var text = data.datasets[tooltipItem.datasetIndex].label;
                   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];                                 

                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }  

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                   } else {
                        label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
                   }   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{                
                 gridLines: { color: "rgba(0, 0, 0, 0)" }
            }],
            yAxes: [{
            }]
        }
    };

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'bar',
  options: options,
  data: data
});
body {  
  background: #1D1F20;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
    <canvas id="canvas"></canvas>
</div>
0 голосов
/ 01 мая 2020 

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: 'Train',
      backgroundColor: "rgba(168, 90, 50,1)",
      data: [50, 40, 23, 45, 67, 78, 23],
      stack: 1
    }, {
      label: 'Bus',
      backgroundColor: "rgba(50, 168, 80,1)",
      data: [50, 40, 78, 23, 23, 45, 67],
      stack: 3
    }, {
      label: 'Taxi',
      backgroundColor: "rgba(83, 95, 219,1)",
      data: [50, 67, 78, 23, 40, 23, 0],
      stack: 2
    },
    {
      label: 'Taxi cash',
      backgroundColor: "rgba(83, 55, 219,1)",
      data: [25, 10, 12, 20, 10, 12, 5],
      stack: 2
    }]
};

var options = {
        title: {
            display: true,
            text: "Transport Mode"
        },
        tooltips: {
            mode: 'single',
            callbacks: {
                label: function(tooltipItem, data) {

                   var text = data.datasets[tooltipItem.datasetIndex].label;
                   var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];                                 

                   var total = 0;
                   var label = '';

                   for (var i = 0; i < data.datasets.length; i++) {
                       total += data.datasets[i].data[tooltipItem.index];                       
                   }  

                   if (tooltipItem.datasetIndex != data.datasets.length - 1) {
                      label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
                   } else {
                        label += text + " : $" + value.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,'), "Total : $" + total;
                   }   
                   return label;
                }
            }
        },
        responsive: true,
        scales: {
            xAxes: [{                
                 gridLines: { color: "rgba(0, 0, 0, 0)" },
                 stacked: true
            }],
            yAxes: [{
            }]
        }
    };

var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'bar',
  options: options,
  data: data
});
body {  
  background: #1D1F20;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="chart-container">
    <canvas id="canvas"></canvas>
</div>

Просмотр гистограммы с накоплением пример 

scales: {
  yAxes: [{
    stacked: true
  }]
}
...