Как исправить анимацию chartjs в функции onComplete для значения гистограммы 0 - PullRequest
Новая
       7

Как исправить анимацию chartjs в функции onComplete для значения гистограммы 0

0 голосов
/ 28 сентября 2019

Нулевое значение для гистограммы с использованием функции chartjs onComplete показывает полосу, но полоса отображается сверху первого бара вместо того, где находится нулевое значение.Что мне нужно сделать, чтобы убедиться, что тонкая красная полоса будет видна везде, где значение равно нулю?

Это для chartjs Версия: 2.7.2 Функция анимации onComplete.Я выполнил поиск в стеке и нашел код функции Animation onComplete на Начать гистограмму с 0, используя ChartJS для создания гистограммы с нулевыми значениями, и преобразовал код для работы на моей гистограмме.Основное различие между его кодом и моим состоит в том, что он предоставляет набор данных - наборы данных var = [15, 2, 0, 11];- пока мой набор данных поступает из внешнего файла - js / bars / data_session_test_results_all.php.

Его код 

var ctx = document.getElementById("myChart").getContext('2d');
var datasets = [15, 2, 0, 11];
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["1", "2", "3", "4"],
    datasets: [{
      label: 'value',
      backgroundColor: '#F00',
      data: datasets
    }]
  },

    animation: {
      onComplete: function() {
        var dataSet = myChart.getDatasetMeta(0);
        dataSet.data.forEach(elm => {
          if (datasets[elm._index] == 0) {
            ctx.fillStyle = '#F00';
            ctx.fillRect(elm._model.x - elm._view.width / 2, elm._model.y - 1, elm._view.width, 2);
          }
        })
      }
    }

Его изображение his image

Мой код 

    $.post("js/bars/data_session_test_results_all.php",
    function (data)
    {
        console.log(data);
        var name = [];
        var q1 = [];
        var q2 = [];
        var q3 = [];
        var q4 = [];
        var q5 = [];

        for (var i in data) {
            name.push(data[i].subcategory_name);
            q1.push(data[i].ra);
            q2.push(data[i].wa);
            q3.push(data[i].unanswered);
            q4.push(data[i].percent);
            q5.push(data[i].number);

        }

animation: {
onComplete: function() {
var dataSet = graphTests.getDatasetMeta(0);
dataSet.data.forEach(elm => {
if (q3[elm._index] == 0) {
graphTarget.fillStyle = '#F00';
graphTarget.fillRect(elm._model.x - elm._view.width / 2, elm._model.y - 1, elm._view.width, 2);
}
})
}
},

Мое изображение enter image description here

Я ожидал, что тонкая красная полоса будет отображаться горизонтально для значения данных q3где значение бара равно нулю.Вместо этого тонкая красная полоса отображается в верхней части значения данных q1, равного 2,0.Значения q данных из внешнего файла данных: q1: 2.0, q2: 1, q3: 0, q4: 0.67, q5: 1.5.

Элемент проверки браузера firefox показывает ссылку на эту строку - консоль.log (данные);- но это не говорит, что это ошибка.

...