Chart.js 2.7: Как удалить столбец со значением 0 на сгруппированных столбцах?

Я пытаюсь удалить полосу со значением 0 на сгруппированных полосах линейчатой ​​диаграммы, но, хотя я вижу это решение во многих местах, оно не работает для меня.

Что я хочу сделать

Я создал этот кодовый ключ. Он содержит сгруппированную гистограмму ChartJS:

Vue.component('bar-chart', {
  extends: VueChartJs.Bar,
  mounted () {
    this.renderChart({
      labels: [1500,1600,1700,1750,1800,1850,1900],
      datasets: [{ 
        data: [168,17,0,190,0,276,108],
        label: "Europe",
        backgroundColor: "#3cba9f",
        fill: false
      }, { 
        data: [0,202,0,161,0,38,0],
        label: "Asian",
        backgroundColor: "#n8c9b2",
        fill: false
      },{ 
        data: [0,202,0,161,224,38,0],
        label: "Latin America",
        backgroundColor: "#e8c3b9",
        fill: false
      }, { 
        data: [260,43,80,82,0,26,82],
        label: "North America",
        backgroundColor: "#c45850",
        fill: false
      }]
    },
    {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          categoryPercentage: 0.8,
          barPercentage: 0.9
        }],
        yAxes: [{
          scaleLabel: {
            display: true
          },
          ticks: {
            beginAtZero: true // minimum value will be 0.
          }
        }]
      }
    })
  }
})

var vm = new Vue({
  el: '.app'
})

Есть идеи, как добиться желаемого поведения?

Можно ли отфильтровать нули перед передачей данных в диаграмму?

Chris Li 10.09.2018 07:03

Я так не думаю. поскольку метки имеют 7 значений, поэтому каждый набор данных также должен иметь 7 значений, соответствующих индексу меток. При использовании фильтра диаграмма будет неправильной.

Orita 10.09.2018 07:11

да ... я думаю, что единственное решение, которое я знаю, - это если вы можете изменить значение в option, что-то, что показывает значение только в том случае, если значение не 0, что-то вроде: function(value, index) { if (value !== 0) return value + '%';

Fendi jatmiko 10.09.2018 07:26

да. Это то, что я ищу, но понятия не имею, как это сделать!

Orita 10.09.2018 07:38

У меня тоже есть эта проблема, дайте мне знать, как вы ее решили.

Dhirendra Sharma 12.07.2019 14:09

У меня точно такая же проблема, Вам удалось ее решить?

ATT 16.03.2021 09:42

опция skipNull добавлена ​​в Chartjs версии 3, которая удаляет пробелы

vaasu varma 07.04.2021 12:52
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
7
618
0

Другие вопросы по теме