图表 JS 中的条形颜色

Question

我从 php 中的一个查询返回一个数据集并存储在一个 JSON 数组中。我的JSON数组的格式是这样的

Bein, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 .......

我正在使用以下语法存储到数组中，传递给 JSON 并创建我的 Chart.JS 我遇到的问题是我希望 13 的所有数据点都是一种颜色，而 14 的所有数据点成为不同的颜色。这两个月需要保持并排。 Chart.js 是否具有可以适应此的功能/特性？

<?php
    $rows = $db->loadRowList();
    $output = array(); 
    foreach( $rows as $row ) { 
    array_push($output, $row); } 
    $data = json_encode($output[0]);
?>

<script>
    "use strict";
    var jsondata = <?php echo $data; ?>;;
    var values = [];
    for (var i = 1; i < jsondata.length; i++) {
        values.push(jsondata[i]);
    }
    var labelsarr = ["Jan 13", "Jan 14", "Feb 13", "Feb 14", "Mar 13", "Mar 14", "Apr 13", "Apr 14", "May 13", "May 14", "Jun 13", "Jun 14", "Jul 13", "Jul 14", "Aug 13", "Aug 14", "Sep 13", "Sep 14", "Oct 13", "Oct 14", "Nov 13", "Nov 14", "Dec 13", "Dec 14"];
    var ctx = document.getElementById('canvas').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labelsarr,
            datasets: [{
                label: 'Test',
                data: values,
                backgroundColor: 'rgba(0, 119, 204, 0.8)',
            }]
        },
        options: {
            tooltips: {
                callbacks: {
                    label: function(t, d) {
                        var xLabel = d.datasets[t.datasetIndex].label;
                        var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
                        return xLabel + ': ' + yLabel;
                    }
                }
            },
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: '<?php echo $name ?> 2013 & 2014 Data'
            },
            scales: {
                yAxes: [{
                    ticks: {
                        callback: function(value, index, values) {
                            if (parseInt(value) >= 1000) {
                                return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                            } else {
                                return '$' + value;
                            }
                        }
                    }
                }]
            }
        }
    });

Answer 1

目前没有内置功能。你宁愿需要创建一个图表插件来完成它......

plugins: [{
   beforeDraw: function(chart) {
      var labels = chart.data.labels;
      labels.forEach(function(e, i) {
         var bar = chart.data.datasets[0]._meta[0].data[i]._model;
         var dataPoint = e.split(/\s/)[1];
         if (dataPoint === '13') bar.backgroundColor = 'red';
         else if (dataPoint === '14') bar.backgroundColor = 'green';
      });
   }
}]

^{在您的图表选项后添加此项}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var jsondata = ['Bein', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24];
var values = [];
for (var i = 1; i < jsondata.length; i++) {
   values.push(jsondata[i]);
}
var labelsarr = ["Jan 13", "Jan 14", "Feb 13", "Feb 14", "Mar 13", "Mar 14", "Apr 13", "Apr 14", "May 13", "May 14", "Jun 13", "Jun 14", "Jul 13", "Jul 14", "Aug 13", "Aug 14", "Sep 13", "Sep 14", "Oct 13", "Oct 14", "Nov 13", "Nov 14", "Dec 13", "Dec 14"];

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: labelsarr,
      datasets: [{
         label: 'Test',
         data: values,
         backgroundColor: 'rgba(0, 119, 204, 0.8)',
      }]
   },
   options: {
      tooltips: {
         callbacks: {
            label: function(t, d) {
               var xLabel = d.datasets[t.datasetIndex].label;
               var yLabel = t.yLabel >= 1000 ? '$' + t.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : '$' + t.yLabel;
               return xLabel + ': ' + yLabel;
            }
         }
      },
      legend: {
         position: 'top',
      },
      title: {
         display: true,
         text: 'Year 2013 Total Revenue By Month'
      },
      scales: {
         yAxes: [{
            ticks: {
               callback: function(value, index, values) {
                  if (parseInt(value) >= 1000) {
                     return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                  } else {
                     return '$' + value;
                  }
               }
            }
         }]
      }
   },
   plugins: [{
      beforeDraw: function(chart) {
         var labels = chart.data.labels;
         labels.forEach(function(e, i) {
            var bar = chart.data.datasets[0]._meta[0].data[i]._model;
            var dataPoint = e.split(/\s/)[1];
            if (dataPoint === '13') bar.backgroundColor = 'red';
            else if (dataPoint === '14') bar.backgroundColor = 'green';
         });
      }
   }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="canvas"></canvas>