如何更改甜甜圈莫里斯图表中的标签颜色（自定义标签颜色）

Question

我想更改莫里斯甜甜圈图表中的标签颜色：

对于 BusStop：标签颜色应为红色
对于围栏：标签颜色应为蓝色
对于路线：标签颜色应该是黄色或任何东西......

Code Pen Example

我尝试过这样做：

data: [
    {
        label: 'BusStop',
        value:5,
        labelColor:"#EC407A",
    },
    {
        label: 'Fence',
        value: 6,
        labelColor:"#00897B",
    },
    {
        label: 'Route',
        value: 2,
        labelColor:"#C0CA33",
    }
],
labelColor:"#9CC4E4", //this is Constant for all label but I need customized labelColors

没关系，如果它是通过使用 jQuery 或 HTML 或 CSS 完成的。 我尝试了很多方法都没有成功。

这里我附上了截图和笔码：

我还是一名应届生，如果这样做了，我将不胜感激。

Answer 1

我尝试只使用formatter 函数，但labelColor 没有更新。

所以我使用modified morris 为每个数据添加labelColor 属性。

然后您可以像这样定义您的数据，使用labelColor property：

data: [
    { label: 'BusStop', value: 5, labelColor: 'yellow' },
    { label: 'Fence', value: 6, labelColor: 'blue' }, 
    { label: 'Route', value: 2, labelColor: 'red' }
]

您可以使用最新的 Morris v0.5.1 并对其进行扩展以使用一些额外的功能。

请尝试以下扩展 Morris 的 sn-p（我用 // ADDED 评论了我从原始 Morris 添加/更改的代码行或部分）：

(function () {
    var $, MyMorris;

    MyMorris = window.MyMorris = {};
    $ = jQuery;

    MyMorris = Object.create(Morris);

    MyMorris.Donut.prototype.select = function (idx) {
        var row, s, segment, _i, _len, _ref, _fill_color; // ADDED _fill_color
        _ref = this.segments;
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            s = _ref[_i];
            s.deselect();
        }
        segment = this.segments[idx];
        segment.select();
        row = this.data[idx];
        _fill_color = row.labelColor || this.options.labelColor || '#000000'; // ADDED
        return this.setLabels(row.label, this.options.formatter(row.value, row), _fill_color); // ADDED parameter _fill_color
    };


    MyMorris.Donut.prototype.setLabels = function (label1, label2, fill_color) {
        var inner, maxHeightBottom, maxHeightTop, maxWidth, text1bbox, text1scale, text2bbox, text2scale;
        _default_fill = fill_color || '#000000'; // ADDED
        inner = (Math.min(this.el.width() / 2, this.el.height() / 2) - 10) * 2 / 3;
        maxWidth = 1.8 * inner;
        maxHeightTop = inner / 2;
        maxHeightBottom = inner / 3;
        this.text1.attr({
            text: label1,
            transform: '',
            fill: fill_color // ADDED
        });
        text1bbox = this.text1.getBBox();
        text1scale = Math.min(maxWidth / text1bbox.width, maxHeightTop / text1bbox.height);
        this.text1.attr({
            transform: "S" + text1scale + "," + text1scale + "," + (text1bbox.x + text1bbox.width / 2) + "," + (text1bbox.y + text1bbox.height)
        });
        this.text2.attr({
            text: label2,
            transform: '',
            fill: fill_color // ADDED
        });
        text2bbox = this.text2.getBBox();
        text2scale = Math.min(maxWidth / text2bbox.width, maxHeightBottom / text2bbox.height);
        return this.text2.attr({
            transform: "S" + text2scale + "," + text2scale + "," + (text2bbox.x + text2bbox.width / 2) + "," + text2bbox.y
        });
    };
}).call(this);

getMorris('donut', 'donut_chart');

function getMorris(type, element) {
    if (type === 'donut') {
        var morris = Morris.Donut({
            element: element,
            data: [
                {
                    label: 'BusStop',
                    value: 5,
                    labelColor: 'red'
                }, {
                label: 'Fence',
                    value: 6,
                    labelColor: 'blue'
                }, 
                {
                    label: 'Route',
                    value: 2,
                    labelColor: 'yellow'
                }
            ],
            labelColor: "#9CC4E4",
            colors: ['#E53935', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)', 'rgb(0, 150, 136)']
        });
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div id="donut_chart"></div>

Answer 2

一个简单的例子：

Morris.Donut({
  element: 'pie-chart',
  data: [
    {label: "Friends", value: 30, labelColor: 'yellow' },
    {label: "Allies", value: 15},
    {label: "Enemies", value: 45},
    {label: "Neutral", value: 10}
  ],
  colors: ['#ff00ff', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)']
});

“colors: ['#ff00ff', 'rgb(0, 188, 212)', 'rgb(255, 152, 0)'] 行将设置饼图的颜色。请注意，如果标签多于颜色，则颜色会以循环方式重复

文档 https://morrisjs.github.io/morris.js/donuts.html

其他海报摆弄的简单示例 https://codepen.io/andreic/pen/CJoze