morris.js甜甜圈圖表更新顏色與數據

我能夠使用setData（）更新數據，但不幸的是，我沒有找到一種方法來更新新數據的顏色。我已經搜尋了很多。有沒有辦法做到這一點。我也尋找插入標題，但我沒有找到任何。morris.js甜甜圈圖表更新顏色與數據

這是我如何創建圓環圖改變基於數據的顏色，在數據的更新，我需要改變顏色以同樣的方式（在擊事件）：

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

來源

2017-07-13 whisps11

坐落在colors在options參數你莫里斯的使用setData前：

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>

來源

2017-07-13 08:45:10 krlzlx

我已經試過這個片段，但沒有效果：/ – whisps11

在你的代碼，您有：'$（ '＃selected_option'）上（ '點擊'， 'A'，函數（）{如果。（neg_pts> 70）{...}'。如果點擊時不改變'neg_pts'，顏色不會改變。 – krlzlx

是的，你是對的。感謝您指出，我其實並沒有在這裏提及，我會更新我的代碼。 neg_pts正在改變on-click事件。但它仍然不會改變顏色。我寧願有更多的問題與圖形。我發佈了另一個問題。 [https://stackoverflow.com/questions/45095815/morrisjs-donut-drawn-away-from-center-point]。在這裏，我更改了代碼來重繪圖表點擊事件，因爲我在更換顏色時遇到了麻煩。但是，只要有解決方案，我仍然想解決這個問題。 – whisps11

morris.js甜甜圈圖表更新顏色與數據

回答

相關問題