Question

我是一名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',
});

我希望“人物A”的栏为一种颜色，然后“人物B”为另一种颜色，依此类推，但此时所有栏都显示为阵列中的第一种颜色。有谁知道有没有办法做到这一点？非常感谢！

Answer 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";
}
});

Answer 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
});

Answer 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
                            });

Answer 4

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

将此属性添加到您在 Morris 图表中的 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(',')
});

使用morris.js条形图改变酒吧颜色？

4 个答案: