图表 JS 中的条形颜色

Question

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

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

我使用以下语法存储到数组中，传递给 JSON 并创建我的图表.JS 我遇到的问题是我希望 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;
}
}
}
}]
}
}
});

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>