javascript - morris.js 圆环图用数据更新颜色

Question

我可以使用 setData() 更新数据，但不幸的是，我找不到用新数据更新颜色的方法。我已经搜索了很多。有什么办法可以做到吗。我也寻找插入标题，但没有找到。

以下是我创建根据数据更改颜色的圆环图的方法，在更新数据时我需要以相同的方式更改颜色(在点击事件中):

Morris.Donut.prototype.setData = function (data, redraw) {
    if (redraw == null) {
        redraw = true;
    }

    this.data = data;

    this.values = (function () {
        var _i, _len, _ref, _results;
        _ref = this.data;
        _results = [];

        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            row = _ref[_i];
            _results.push(parseFloat(row.value));
        }

        return _results;
    }).call(this);

    this.dirty = true;

    if (redraw) {
        return this.redraw();
    }
}

//create graph
var colors_array = ["#9CC4E4", "#3A89C9"];
var graph_data_arr = [
    { label: "- ive Points", value: neg_pts },
    { label: "+ ive Points", value: pos_pts }
];

if (neg_pts> 70) {
    colors_array[0] = "#ff0a0a";
    colors_array[1] = "#3A89C9";
}               

var morris_donut =  Morris.Donut({
    element: 'donut_div_graph',
    colors: colors_array,
    data: graph_data_arr
});

//update call
$('#selected_option').on('click', 'a', function () {
    neg_pts = 190;
    pos_pts = 45;      

    if (neg_pts> 70) {
        colors_array[0] = "#ff0a0a";
        colors_array[1] = "#3A89C9";
    }                   

    morris_donut.setData( [
        { label: "- ive Points", value: neg_pts },
        { label: "+ ive Points", value: pos_pts },
    ]);
}

Answer 1

使用 setData 之前，在 Morris 的 options 参数中设置 colors:

morris_donut.options["colors"] = colors_array;

请尝试以下代码片段:

var neg_pts = 10;
var pos_pts = 50;

//create graph
var colors_array = ["#9CC4E4", "#3A89C9"];
var graph_data_arr = [{ label: "- ive Points", value: neg_pts }, { label: "+ ive Points", value: pos_pts }];

if (neg_pts > 70) {
    colors_array[0] = "#ff0a0a";
    colors_array[1] = "#3A89C9";
}

var morris_donut = Morris.Donut({
    element: 'donut_div_graph',
    colors: colors_array,
    data: graph_data_arr
});

//update call
$('#selected_option').on('click', 'a', function () {
    neg_pts = 80;

    if (neg_pts > 70) {
        colors_array[0] = "#ff0a0a";
        colors_array[1] = "#3A89C9";
    }

    morris_donut.options["colors"] = colors_array;
    morris_donut.setData([{ label: "- ive Points", value: neg_pts }, { label: "+ ive Points", value: pos_pts }]);
});

<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="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />

<div id="selected_option">
    <a href="#">Simulate neg_pts > 70</a>
</div>
<div id="donut_div_graph"></div>