使用 morris.js 条形图改变条形颜色？答案

【问题标题】：Varying bar colors with morris.js bar chart?使用 morris.js 条形图改变条形颜色？
【发布时间】：2014-11-05 17:52:14
【问题描述】：

我是一名 JavaScript 初学者，使用 morris.js 创建条形图，我需要每个包含 y 值的条形为不同的颜色。下面的代码显示了我到目前为止所做的事情

Morris.Bar({
element: 'calls-made',
data: [
{ y: 'Person A', a: 10 },
{ y: 'Person B', a: 15 },
{ y: 'Person C', a: 12 },
{ y: 'Person D', a: 20 }
],
xkey: 'y',
ykeys: ['a'],
labels: ['Calls'],
barColors: ["#B21516", "#1531B2", "#1AB244", "#B29215"],
hideHover: 'always',
});

我希望 'Person A' 的条形为一种颜色，然后 'Person B' 为另一种颜色，依此类推，但目前所有条形都显示为数组中的第一种颜色。有谁知道是否有办法做到这一点？非常感谢！

【问题讨论】：

标签： javascript morris.js

【解决方案1】：

Morris.Bar({
element: 'bar-example',
data: [
{ y: 'Person A', a: 10 },
{ y: 'Person B', a: 15 },
{ y: 'Person C', a: 12 },
{ y: 'Person D', a: 20 }
],
xkey: 'y',
ykeys: ['a'],
labels: ['Calls'],
hideHover: 'always',
barColors: function (row, series, type) {
console.log("--> "+row.label, series, type);
if(row.label == "Person A") return "#AD1D28";
else if(row.label == "Person B") return "#DEBB27";
else if(row.label == "Person C") return "#fec04c";
else if(row.label == "Person D") return "#1AB244";
}
});

【讨论】：

效果。这对我有帮助。 +1

【解决方案2】：

我做了类似的事情，但使用了动态项目。

var $arrColors = ['#34495E', '#26B99A',  '#666', '#3498DB'];
Morris.Bar({
    element: 'div-bars',
    data: [
        {ITENS-DYNAMIC-HERE}
    ],
    xkey: 'item',
    ykeys: ['value'],
    labels: ['Atendimentos'],
    barColors: function (row, series, type) {
        return $arrColors[row.x];
    }, 
    hideHover: 'auto',
    resize: true
});

【讨论】：

【解决方案3】：

我找到了一种改变颜色的方法，即使列表中的值超过四个。如果有人来这里寻找答案

var barColorsArray = ['#3498DB', '#34495E','#26B99A', '#DE8244'];
var colorIndex = 0;

                            Morris.Bar({
                              element: 'graph_bar',
                              data: [DYNAMIC_VALUES_HERE]
                                ,
                              xkey: 'groupedBy',
                              ykeys: ['Numbers' ],
                              labels: ['Names'],
                              barRatio: 0.4,
                              barColors: function () {
                                  if(colorIndex < 4)
                                    return barColorsArray[++colorIndex];
                                  else{
                                      colorIndex = 0;
                                      return barColorsArray[++colorIndex];
                                  }
                                },
                              xLabelAngle: 35,
                              hideHover: 'auto',
                              resize: true
                            });

【讨论】：

【解决方案4】：

也许这个网站对你有帮助： https://styleguide.getopensocial.com/item-javascript-morrisjs-barchart.html

将此属性添加到您在莫里斯图表中的 id 上

<div id="morris-bar-chart" style="height: 200px" data-  colors="#29abe2,#ffc142,#1ab394"></div>

在你的 JS 文件中做同样的事情：

var labelColor = jQuery('#morris-bar-chart').css('color');
Morris.Bar({
  element: 'morris-bar-chart',
  data: [
    { y: '2012', 6: 257,790, 7: 517,920, 8: 0 },
    { y: '2013', 6: 234,696, 7: 732,660, 8: 0 },
    { y: '2014', 6: 172,186, 7: 964,016, 8: 0 },
    { y: '2015', 6: 124,448, 7: 1,127,621, 8: 44,335 },
    { y: '2016', 6: 86,839, 7: 994,627, 8: 116,559 }
  ],
  xkey: 'y',
  ykeys: ['6', '7', '8'],
  labels: ['Drupal 6', 'Drupal 7', Drupal, 8],
  gridTextColor: labelColor,
  barColors: jQuery('#morris-bar-chart').data('colors').split(',')
});

【讨论】：