Я хочу изменить цвет отдельной гистограммы

Question

Я получаю данные из mysql, используя php для заполнения массива, а затем использую этот результат для заполнения данных диаграммы. Я хочу изменить цвет столбцов, которые больше 50. Я попробовал несколько примеров, которые уже переполняют стек, но я не смог решить свою проблему. Вот почему я сейчас задаю этот вопрос.

$(document).ready(function() {
  $.ajax({
    url: "http://localhost:8080/chartjs/data.php",
    method: "GET",
    success: function(data) {
      console.log(data);
      var player = [];
      var score = [];

      for (var i in data) {
        player.push(data[i].y);

        score.push(data[i].x);
      }


      var chartdata = {
        labels: player,
        datasets: [{
            label: 'Records from mysql',
            backgroundColor: 'rgb(92, 95, 102)',
            borderColor: 'rgba(200, 200, 200, 0.75)',
            hoverBackgroundColor: 'rgba(30, 0, 200)',
            hoverBorderColor: 'rgba(200, 200, 197)',
            data: score
          }

        ]
      };



      var ctx = $("#mycanvas");

      var barGraph = new Chart(ctx, {
        type: 'bar',
        colors: {
          data: function(score) {
            return (score.value >= 45) ? '#00ff00' : '#f90411';
          }
        },
        data: chartdata
      });
    },
    error: function(data) {
      console.log(data);
    }

  });
});

#chart-container {
  width: 640px;
  height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div id="chart-container">
  <canvas id="mycanvas"></canvas>
</div>

Answer 1

Из того, что я мог выяснить, ваш вопрос в основном связан с использованием chart.js . Мое решение вашей проблемы будет выглядеть следующим образом:

//Load your data (obviously this is a hardcoded example, you could use any backend code like PHP):
let data = [12, 19, 74, 38, 45, 62];
//Insantiate fields you would like to use, such as `colors` for background color and `borderColors` for, you guessed it, the color of the borders:
let colors = [];
let borderColors = [];
//Set the field values based on value (this would be your logic):
$.each(data, function(index, value) {
  //When the value is higher than 45, set it to given color, else make them the other color (in the example the bars would appear red-ish):
  if(value > 45) {
    colors[index] = "rgba(0, 255, 0, 0.2)";
    borderColors[index] = "rgba(0, 255, 1)";
  }
  else {
    colors[index] = "rgba(249, 4, 17, 0.2)";
    borderColors[index] = "rgba(249, 4, 17, 1)";
  }
});

//Any code related to creating the chart with the bars (you could find any documentation regarding this code on the homepage of Chart.js):
let ctx = document.getElementById('myChart');
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['1', '2', '3', '4', '5', '6'],
        datasets: [{
            label: 'Records from mysql',
            //Populate your fields here:
            data: data,
            backgroundColor: colors,
            borderColor: borderColors,
            hoverBackgroundColor: 'rgba(30, 0, 200)',
            hoverBorderColor: 'rgba(200, 200, 197)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

#chart-container {
  width: 640px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<div id="chart-container">
  <canvas id="myChart"></canvas>
</div>

JSFiddle

Я применил некоторый код, который нашел в следующем посте на Github:

$.each(data, function(index, value) {
  //When the value is higher than 45, set it to given color, else make them the other color (in the example the bars would appear red-ish):
  if(value > 45) {
    colors[index] = "rgba(0, 255, 0, 0.2)";
    borderColors[index] = "rgba(0, 255, 1)";
  }
  else {
    colors[index] = "rgba(249, 4, 17, 0.2)";
    borderColors[index] = "rgba(249, 4, 17, 1)";
  }
});

Если кто-нибудь знает более чистое решение, пожалуйста, дайте мне знать в комментариях.