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>

图表JS中的条形图颜色

1 个答案: