Chart.js-如果没有值，则显示0

Question

我正在尝试通过Charts.js显示视图统计信息，并且正在使用mysql和php。我仅在有视图的情况下保存数据。如果没有视图，则没有数据。如果没有来自mysql的数据，我想将其设置为“ 0”。这是我的代码

   Chart.defaults.scale.ticks.beginAtZero = true;
Chart.scaleService.updateScaleDefaults('line', {
  ticks: {
    min: 0
  }
});
var options = {
  type: 'line',
  data: {
    labels: [00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
    datasets: [{
      label: 'Dataset 3 (filled)',
      data: [{
        x: 0,
        y: 1
      }, {
        x: 1,
        y: 4
      }, {
        x: 2,
        y: 7
      }, {
        x: 14,
        y: 5
      }],
      backgroundColor: "rgba(54, 162, 235, 1)",
      borderColor: "rgba(54, 162, 235, 0.6)",
      borderWidth: 2,
      fill: false
    }]
  },
  options: {
    tooltips: {
      mode: "index",
      intersect: false,
    },
    hover: {
      mode: "nearest",
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          stacked: true
        }
      }]
    }
  }
}

var ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, options);

红线是我想做的。

这里jsfiddle：https://jsfiddle.net/mgLo57as/4/

感谢回复

Answer 1

在加载图表之前，您可以手动填充缺失点。

首先，将标签和点保存在单独的变量中...

var labels = [00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
var points = [{x: 0, y: 1}, {x: 1, y: 4}, {x: 2, y: 7}, {x: 14, y: 5}];

然后填写缺失的点...

// fill missing points
labels.forEach(function (label) {
  hasPoint = false;
  points.forEach(function (point) {
    if (point.x === label) {
      hasPoint = true;
    }
  });
  if (!hasPoint) {
    points.push({
      x: label,
      y: 0
    });
  }
});

// sort final points
points.sort(function (pointA, pointB) {
  return pointA.x - pointB.x;
});

请参阅以下工作片段...

$(document).ready(function() {
  Chart.defaults.scale.ticks.beginAtZero = true;
  Chart.scaleService.updateScaleDefaults('line', {
    ticks: {
      min: 0
    }
  });

  var labels = [00,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,18,19,20,21,22,23];
  var points = [{x: 0, y: 1}, {x: 1, y: 4}, {x: 2, y: 7}, {x: 14, y: 5}];

  // fill missing points
  labels.forEach(function (label) {
    hasPoint = false;
    points.forEach(function (point) {
      if (point.x === label) {
        hasPoint = true;
      }
    });
    if (!hasPoint) {
      points.push({
        x: label,
        y: 0
      });
    }
  });
  
  // sort final points
  points.sort(function (pointA, pointB) {
    return pointA.x - pointB.x;
  });

  var options = {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        {
          label: 'Dataset 3 (filled)',
          data: points,
          backgroundColor: "rgba(54, 162, 235, 1)",
          borderColor:"rgba(54, 162, 235, 0.6)",
          borderWidth: 2,
          fill: false
        }
      ]
    },
    options: {
      tooltips: {
        mode: "index",
        intersect: false,
      },
      hover: {
        mode: "nearest",
        intersect: true
      },
      scales: {
        yAxes: [{
          ticks: {
            stacked: true
          }
        }]
      }
    }
  }

  var ctx = document.getElementById('myChart').getContext('2d');
  new Chart(ctx, options);
});

<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>
<canvas id="myChart"></canvas>