如何根据值在谷歌柱形图中分配自定义颜色（Django）答案

【问题标题】：How to assign custom color in google column chart based on value (Django)如何根据值在谷歌柱形图中分配自定义颜色（Django）
【发布时间】：2020-08-29 23:56:11
【问题描述】：

我有价值观：

m=72
n=34
z=59

我得到了以下谷歌柱形图：

<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 着色：

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，只是学会了复制粘贴和修改准备好的代码，但是在这种情况下，我不知道如何根据条件自定义列的颜色。

感谢任何帮助。

【问题讨论】：

标签： javascript django

【解决方案1】：

你可以使用 django 模板逻辑吗？

{% if m > 70 %}green{% elif m > 50 %}orange{% else %}red{%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 %}"],)

【讨论】：