嗨，我在莫里斯图表中使用了以下代码，它工作正常。但我需要使线条具有不同的颜色，因此 1-3 是绿色，4-6 是橙色，7-10 是红色。
function init_morris_charts() {
if( typeof (Morris) === 'undefined'){ return; }
console.log('init_morris_charts');
if ($('#graph_bar').length){
Morris.Bar({
element: 'graph_bar',
data: [
{device: '1', geekbench: <?php echo $grade1Value; ?>},
{device: '2', geekbench: <?php echo $grade2Value; ?>},
{device: '3', geekbench: <?php echo $grade3Value; ?>},
{device: '4', geekbench: <?php echo $grade4Value; ?>},
{device: '5', geekbench: <?php echo $grade5Value; ?>},
{device: '6', geekbench: <?php echo $grade6Value; ?>},
{device: '7', geekbench: <?php echo $grade7Value; ?>},
{device: '8', geekbench: <?php echo $grade8Value; ?>},
{device: '9', geekbench: <?php echo $grade9Value; ?>},
{device: '10', geekbench: <?php echo $grade10Value; ?>},
{device: 'NA', geekbench: <?php echo $gradeNAValue; ?>}
],
xkey: 'device',
ykeys: ['geekbench'],
labels: ['No Of Buyers'],
barRatio: 0.4,
barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
xLabelAngle: 45,
hideHover: 'auto',
resize: true
});
}
我有什么想法可以做到这一点吗？我可以看到 #26B99A 是条形颜色，但这是每行的颜色。
谢谢
最佳答案
您可以在barColors中定义一个函数，该函数将根据您的需要返回颜色，如下所示:
barColors: function(a) {
if (0 <= a.x && a.x < 3) { return 'green'; }
else if (3 <= a.x && a.x < 6) { return 'orange'; }
else { return 'red'; }
},
关于javascript - 莫里斯图多色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60139178/