Question

我能够使用setData（）更新数据但遗憾的是，我找不到使用新数据更新颜色的方法。我已经搜索了很多。有没有办法做到这一点。我也寻找插入标题，但我还没找到。

以下是我如何创建基于数据更改颜色的圆环图，更新数据时我需要以相同方式更改颜色（在点击事件中）：

class Dayoffer < ApplicationRecord
 belongs_to :food
end

Answer 1

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

morris_donut.options["colors"] = colors_array;

请尝试以下代码段：

＆＃13;

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 }]);
});

＆＃13;

<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>

＆＃13;

morris.js圆环图更新颜色与数据

1 个答案: