Question

我是JS的新手，我想创建一个条形图，其中具有最大值的列与其他列相比具有不同的颜色。我可以创建图表，但是我无法访问单列属性。我一直在网上寻找答案，但是到目前为止，找不到任何解决方案对我有帮助。工作流程如下：

我要求用户输入文字，
一旦用户按下按钮，脚本就会在python中调用一个函数（我使用python flask），该函数会向我返回一个值和标签数组，
然后，带有这些值和标签的图表就会出现在网页上。

一切正常，我只是无法更改单个条形的颜色。

这是JS：

$(function() {
    $('a#process_input').bind('click', function() {
        $.getJSON('/background_process', {
            smile: $('input[name="text_string"]').val(),
        }, function(data) {
            $("#result").text(data.output);
            var labels = data.labels;
            var values = data.values;

            Chart.defaults.global.responsive = false;

            var chartData = {
              labels : labels,
              datasets : [{
                  label: 'data_label',
                  fill: true,
                  lineTension: 0.1,
                  backgroundColor: "rgba(75,192,192,0.4)",
                  borderColor: "rgba(75,192,192,1)",
                  borderCapStyle: 'butt',
                  borderDash: [],
                  borderDashOffset: 0.0,
                  borderJoinStyle: 'miter',
                  pointBorderColor: "rgba(75,192,192,1)",
                  pointBackgroundColor: "#fff",
                  pointBorderWidth: 1,
                  pointHoverRadius: 5,
                  pointHoverBackgroundColor: "rgba(75,192,192,1)",
                  pointHoverBorderColor: "rgba(220,220,220,1)",
                  pointHoverBorderWidth: 2,
                  pointRadius: 1,
                  pointHitRadius: 10,
                  data : values,
                  scaleShowLabels: true,
                  spanGaps: false
                }]
              }

              // get chart canvas
            var ctx = document.getElementById("myCanvas").getContext("2d");

            // create the chart using the chart canvas
            var myChart = new Chart(ctx, {
              type: 'bar',
              data: chartData,
              options: {
                        scaleShowValues: true,
                        scales: {
                                    yAxes: [{
                                                ticks: {
                                                        beginAtZero: true
                                                        }
                                            }],
                                    xAxes: [{
                                                ticks: {
                                                        autoSkip: false
                                                        }
                                            }]
                                }
                        }

                });

        });

    });
});

以下是我的意思的示例： max_value_different_color

Answer 1

backgroundColor: "rgba(75,192,192,0.4)"

您可以添加一个数组来代替给它单一颜色：

backgroundColor:["rgba(255, 99, 132, 0.2)","rgba(255, 159, 64, 0.2)","rgba(255, 205, 86, 0.2)"]

示例：

new Chart(document.getElementById("chartjs-1"), {
  "type": "bar",
  "data": {
    "labels": ["First", "Second", "Third", "Fourth"],
    "datasets": [{
      "label": "Example Dataset",
      "data": [65, 59, 80, 31],
      "fill": false,
      "backgroundColor": ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 99, 132, 0.2)"],
      "borderColor": ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 99, 132)", "rgb(255, 99, 132)"],
      "borderWidth": 1
    }]
  },
  "options": {
    "scales": {
      "yAxes": [{
        "ticks": {
          "beginAtZero": true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chartjs-1" class="chartjs">https://stackoverflow.com/posts/51843404/edit#

在documentation中[]表示哪些属性也接受数组（backgroundColor-Color / Color []）

Answer 2

我认为最简单的方法是为每个小节定义backgroundColor。然后，您可以找到最大索引并更改颜色。这是一个简化的示例：

function argMax(array) {
  return array.map((x, i) => [x, i]).reduce((r, a) => (a[0] > r[0] ? a : r))[1];
}

// dummy data
var data = [12, 19, 1, 14, 3, 10, 9];
var labels = data.map((x, i) => i.toString()); 

// other data color
var color = data.map(x => 'rgba(75,192,192,0.4)');

// change max color
color[argMax(data)] = 'red';

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                    label: 'value',
                    data: data,
                    backgroundColor: color,
            }]
        }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0-beta/Chart.js"></script>

<canvas id="myChart" width="600" height="300"></canvas>

Chart.js更改最大值栏的颜色

2 个答案: