Chart.js更改最大值栏的颜色 [英] Chart.js changing the color of the max value bar

问题描述

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

I'm new to JS, I want to create a bar chart where the column with the max value has a different color compared to the others. I can create the chart but I don't manage to access the single column properties. I have been looking for answers on the web but none of the solutions I have found so far helped me. The workflow is the following:

1. 我要求用户输入文本，


2. 用户按下按钮，脚本将在python中调用一个函数（我使用python flask），该函数会向我返回一个值和标签的数组，


3. 然后，带有这些值和标签的图表就会显示在网页上

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

Everything works fine, I'm just not able to change the color of a single bar.

这是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
                                                        }
                                            }]
                                }
                        }

                });

        });

    });
});

以下是我的意思的示例：

Here is an example of what I mean:

推荐答案

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

I think the easiest way to do it is by defining backgroundColor for each bars. Then you can find the max index and change the color. Here is a simplified example:

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更改最大值栏的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！