Morris 条形图，1 条线显示 2 种颜色，负值和正值

Question

我有一个 Morris 条形图显示正面和负面结果。

我想要实现的是制作 2 种颜色，一种用于负面效果，一种用于正面效果，如下图所示。

我查看了文档，但没有找到任何解决方案。

这可能吗？

这是当前代码：

var positiveColor = 'orange';   //'#32CD32';
var negativeColor = 'grey';     //'#FF6347';

Morris.Bar({
  element: 'morris-bar2',
  barColors: [positiveColor, negativeColor],
  data: <?php echo $json_data2; ?>,
  stacked: false,
  resize: true,
  xkey: 'y',
  ykeys: ['a'],
  labels: ['Total', ''],
  hideHover: false,
  gridTextColor: '#4F5F6F',
  gridTextSize: '12'
});

示例：

当前条形颜色

需要像

Answer 1

根据 one of the examples on GitHub，您可以使用回调 barColors 属性。

所以，你可以这样做：

barColors: function (row, series, type) {
    if (row.y < 0)
        return "grey";
    return "orange";
}

Answer 2

好吧，您可以随时使用此代码

 ykeys: ['positive', 'negative'],
 barColors: ['#00cccc', '#3300cc'],

这只是一个例子

我所拥有的完整示例；

var bar = new Morris.Bar({
  element: 'chart',
  resize: true,
  data:[<?php echo $chart_data; ?>],
  barColors: ['#00cccc', '#3300cc'],
  xkey: 'date',
  ykeys: ['Positive', 'Negative'],
  labels: ['Positive Value', 'Negative Value '],
  hideHover: 'auto'
});

Morris 条形图，1 条线显示 2 种颜色，负值和正值

Morris bar chart, show 2 colors in 1 line, negative and positive

javascript

css

morris.js