如何在Donut Morris图表中更改标签颜色(自定义标签颜色) [英] How to change label color in Donut Morris Chart (customized label colors)

查看:609
本文介绍了如何在Donut Morris图表中更改标签颜色(自定义标签颜色)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想更改Morris Donut图表中的标签颜色:

I want to change Label Color in Morris Donut chart:

对于BusStop:标签颜色应为红色
对于围栏:标签颜色应为蓝色
对于路线:标签颜色应为黄色或其他任何颜色.

For BusStop: Label Color should be Red
For Fence: Label Color should be Blue
For Route: Label Color Should be Yellow or anything...

代码笔示例

我尝试这样做:

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完成. 我尝试了很多方法,但都没有成功.

It's ok, if it is done by using jQuery or HTML or CSS. I tried to do in many ways without success.

在这里,我附上了屏幕截图以及笔号:

Here I have attached screenshot and as well as Pen Code:

我仍然是应届生,并且感谢您这样做.

I am still a Fresher, and appreciate if this is done.

推荐答案

我尝试仅使用formatter函数,但未更新labelColor.

I tried to use only the formatter function but the labelColor is not updated.

因此,我使用了修改过的莫里斯labelColor属性添加了每个数据.

So I used a modified morris adding a labelColor property for each data.

然后您可以使用labelColor property这样定义数据:

You can then define your data like this, using the 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并将其扩展为使用一些额外的功能.

You can use the latest Morris v0.5.1 and extend it to use some extra functionalities.

请尝试以下扩展莫里斯的代码段(我用// ADDED注释了我从原始莫里斯添加/更改的代码行或部分):

Please try the following snippet that extends Morris (I commented the with // ADDED for the lines or portion of code I added/changed from the original 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>

这篇关于如何在Donut Morris图表中更改标签颜色(自定义标签颜色)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆