chart.js - 图表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 here .