チャート内のバーの色JS

Question

PHPの1つのクエリから1つのデータセットを返し、JSON配列に格納します。私のJSON配列の形式は、このような

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

のようなものです私が持っている問題は、私はすべてのデータポイントをしたいということで、配列に格納するJSONに渡すと私のChart.JSを作成するには、以下の構文を使用しています13は1つの色であり、14のすべてのデータ点は異なる色である。 2ヶ月は並んでいる必要があります。 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'; 
     }); 
    } 
}] 

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>

ᴇxᴀᴍᴘʟᴇこれはあなたのチャートオプションに続く

ᴡᴏʀᴋɪɴɢを追加します