图表 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 是否有一个 function/feature 可以容纳这个？

<?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>

图表 JS 中的条形颜色

Bar Color In Chart JS

jquery

joomla

json

chart.js

chart.js2