代码之家 › 专栏 › 技术社区 › BellHopByDayAmetuerCoderByNigh

图表JS中的条形图颜色

chart.js2 chart.js joomla json jquery

BellHopByDayAmetuerCoderByNigh · 技术社区 · 8 年前

我在php中从一个查询返回一个数据集,并存储在JSON数组中。我的JSON数组的格式如下

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

我使用以下语法存储到数组中,传递到JSON并创建图表。我的问题是,我希望13的所有数据点都是一种颜色,14的所有数据点都是不同的颜色。这两个月需要并驾齐驱。做图表。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;
                            }
                        }
                    }
                }]
            }
        }
    });

1 回复 | 直到 8 年前

É¢Êá´É´á´ 8 年前

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';
      });
   }
}]

^{添加此选项,然后添加图表选项}

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>