如何根据值在Google柱形图中分配自定义颜色(Django) [英] How to assign custom color in google column chart based on value (Django)

问题描述

我有价值观:

m=72
n=34
z=59

我得到了以下google柱形图:

I got the following google column chart :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
               <script type="text/javascript">
                 google.charts.load("current", {packages:['corechart']});
                 google.charts.setOnLoadCallback(drawChart);
                 function drawChart() {
                   var data = google.visualization.arrayToDataTable([
                     ["Apple", {{m}}, "green"],
                     ["Orange", {{n}}, "red"],
                     ["Grape", {{z}}, "orange"],);

                   var view = new google.visualization.DataView(data);
                   view.setColumns([0, 1,
                                    { calc: "stringify",
                                      sourceColumn: 1,
                                      type: "string",
                                      role: "annotation" },
                                    2]);

                   var options = {title: "Fruits",width: 1000, height: 400, bar: {groupWidth: "95%"},};

                   var chart = new google.visualization.ColumnChart(document.getElementById

("columnchart_values"));chart.draw(view, options);}
               </script>
              <div id="columnchart_values" style="width: 900px; height: 300px;"></div>

我想通过以下方式为值m，n或z着色:

i want to color values m,n or z in the following way:

if value (m,n or z) more than 70 color green
if value (m,n or z) more than 50 but less than 70 color orange
if value (m,n or z) less than 50 color red

我对刚刚学会复制粘贴并修改就绪代码的js不好，但是在这种情况下，我不会根据条件自定义列的颜色.

I am not good with js just learned to copy pasted and modify ready code however in this case I do not how to customise colors of columns based on conditions.

感谢您的帮助.

推荐答案

您可以使用Django模板逻辑吗?

Could you use django template logic?

{％，如果m>70％}绿色{％elif m>50％}橙色{％else％}红色{％endif％}

function drawChart() {
   var data = google.visualization.arrayToDataTable([
     ["Apple", {{m}}, "{% if m > 70 %}green{% elif m > 50 %}orange{% else %}red{%endif %}"],
     ["Orange", {{n}}, "{% if n > 70 %}green{% elif n > 50 %}orange{% else %}red{%endif %}"],
     ["Grape", {{z}}, "{% if z > 70 %}green{% elif z > 50 %}orange{% else %}red{%endif %}"],)

这篇关于如何根据值在Google柱形图中分配自定义颜色(Django)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！