图表js显示空图

Question

我正在使用 Chart.js .Bar() 图表。

但是，在某些情况下系统中可能没有数据。如果没有创建空（虚拟）数据集，我可以以某种方式让 Chartjs 绘制一个空图吗？

Answer 1

编辑：我编辑了帖子以按照@zazu的要求显示空图的水平线

在此示例中，我设置了一个 Chart.js 折线图，提供第一个包含数据的数据集（为了缩放网格垂直轴并使水平线可见），以及包含空数据的第二个数据集。这会产生一个空图表，但完整的网格可见：

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    // invisible dataset
    {
        label: "",
        fillColor: "rgba(220,220,220,0.0)",
        strokeColor: "rgba(220,220,220,0)",
        pointColor: "rgba(220,220,220,0)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        // change this data values according to the vertical scale
        // you are looking for 
        data: [65, 59, 80, 81, 56, 55, 40]
    },
    // your real chart here
    {
        label: "My dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: []
    }
]
};

var options = {
    animation: false,
    ///Boolean - Whether grid lines are shown across the chart
    scaleShowGridLines : true,
    //Boolean - Whether to show vertical lines (except Y axis)
    scaleShowVerticalLines: true,
    showTooltips: false
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);

<script src="http://www.chartjs.org/assets/Chart.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

JSFiddle 这里。

Answer 2

如果您是从API获取数据，可以按如下方式处理：

if (res.data) {
  chartData = {
    labels: getChartLabels(res.data),
    datasets: [
      //set your data set
    ],
  };
  //other assignments
} else {
  chartData.datasets.forEach((item) => (item.data = []));
}

当没有记录时，会清空数据集的数据列表。

更新

就我而言，我必须初始化图表数据的空状态。像这样的东西：

const powerChartData = {
  labels: [],
  datasets: [
    {
      label: "Max",
      backgroundColor: "#0086C9",
      borderColor: "#0086C9",
      data: [],
      fill: false,
    },
    {
      label: "Average",
      backgroundColor: "#32D583",
      borderColor: "#32D583",
      data: [],
      fill: false,
    },
  ],
};

稍后我只需填写即可

powerChartData.datasets[].data