Grafico js visualizza trama vuota

Question

Sto usando i grafici chart.js .Bar().

Tuttavia, in alcune condizioni potrebbero non esserci dati nel sistema. A parte la creazione di set di dati vuoti (fittizi), posso in qualche modo far disegnare una trama vuota?

Answer 1

Edit: Ho modificato il post per mostrare le linee orizzontali di un grafico vuoto come @zazu chiesto esso

In questo esempio, ho creato un grafico lineare Chart.js, fornire un primo insieme di dati con i dati (in per scalare l'asse verticale della griglia e rendere visibili le linee orizzontali) e un secondo con dati vuoti. Ciò si traduce in un grafico vuoto, ma con la griglia completa visibile:

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.