如何在Donut Morris图表中更改标签颜色(自定义标签颜色) [英] How to change label color in Donut Morris Chart (customized label colors)
问题描述
我想更改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屋!