我想更改莫里斯甜甜圈图表中的标签颜色：
对于巴士站：标签颜色应为红色
对于栅栏：标签颜色应为蓝色
对于路线：标签颜色应该是黄色或任何东西......
Codepen 示例 https://codepen.io/anon/pen/dVJRaK
我尝试这样做：
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 完成的，那就没问题。 我尝试了很多方法都没有成功。
Here I have attached screenshot and as well as Pen Code:
![Screenshot [2]](https://i.stack.imgur.com/d91AG.png)
我还是一名新生，如果能做到这一点，我将不胜感激。
我尝试只使用formatter功能但是labelColor没有更新。
所以我用了一个改良莫里斯 https://github.com/armanm/morris.js/commit/97d1da0918a1544dcc6dcc4724a4a4cc6d4cff4c添加一个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 并扩展它以使用一些额外的功能。
请尝试以下扩展莫里斯的片段（我评论了// ADDED对于我从原始莫里斯添加/更改的代码行或部分）：
(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>