Хотите показать небольшую часть js Bar Chart, когда значение равно нулю - PullRequest
Новая
       10

Хотите показать небольшую часть js Bar Chart, когда значение равно нулю

0 голосов
/ 29 ноября 2018

У меня есть эти гистограммы, которые иногда показывают нулевые значения для пользователя.Я хотел бы показать немного гистограммы, чтобы она не выглядела полностью пустой, но данные связаны с визуальным представлением гистограммы.Есть ли способ, которым я мог бы иметь верхнее число, скажем, ноль, но значение будет 3 (или что-то маленькое) в каждом столбце?Вот код и скриншоты.Один скриншот имеет данные, другой ноль.Я бы хотел, чтобы на нулевом графике было только немного оранжевого и зеленого, когда он на нуле.Спасибо enter image description hereenter image description here

<canvas id="bar-chart" width="900" height="350"></canvas>

<script type="text/javascript">
    var ctx = document.getElementById("bar-chart");
debugger;
var data = {
  labels: ["Page Views", "Data Requests"],
  datasets: [{
    data: [<?php echo $databaseClass->totalViewsSelectedMonth($user_id, $year, 1);

      ?>, <?php 
      echo $databaseClass->isRfYearMonth($user_id, $year, 1);
      ?>],
    backgroundColor: ["orange", "green"]
  }]
}
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    "hover": {
      "animationDuration": 0
    },
    "animation": {
      "duration": 1,
      "onComplete": function() {
        var chartInstance = this.chart,
          ctx = chartInstance.ctx;

        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          meta.data.forEach(function(bar, index) {
            var data = dataset.data[index];
            ctx.fillText(data, bar._model.x, bar._model.y - 5);
          });
        });
      }
    },
    legend: {
      "display": false
    },
    tooltips: {
      "enabled": false
    },
    scales: {
      yAxes: [{
        display: false,
        gridLines: {
          display: false
        },
        ticks: {
          max: Math.max(...data.datasets[0].data) + 20,
          display: false,
          beginAtZero: true
        }
      }],
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
</script>

1 Ответ

0 голосов
/ 29 ноября 2018

Похоже, вы можете обновить оси ваших графиков до нового значения по умолчанию.Таким образом, используя модифицированную форму их примера, что-то вроде следующего (модифицированного под ваш код): 

// ...
scales: {
    yAxes: [{
        display: false,
        gridLines: {
            display: false
        },
        ticks: {
            max: Math.max(...data.datasets[0].data) + 20,
            min: -3, // ADDED
            display: false,
            beginAtZero: true
        }
    }],
// ...

... будет делать то, что вы ищете - с дополнительным преимуществом, что 0 и3 не будет выглядеть одинаково, относительный размер бара должен оставаться точным.

...