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。

图表js显示空图

1 个答案: