Ändern Sie chart.js Optionen basierend auf Fensterbreite

Question

Ich bin ziemlich neu zu chart.js und HTML5-Canvases, aber ich konnte etwas zusammenstellen.

Was ich jetzt tun muss, ist in der Lage, die xAxes.display basierend auf der Breite des Fensters zu ändern. Ich nehme an, dass dies eine function innerhalb der scales.xAxes.display Element beinhaltet, aber ich bin mir nicht sicher, wie. Irgendwelche Empfehlungen von wo ich mehr Informationen finden kann, wie man das macht?

var allTimeAll = $("#my-chart"); 
 
var allTimeAllChart = new Chart(allTimeAll, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], 
 
    datasets: [{ 
 
     label: 'Confirmed', 
 
     data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], 
 
     backgroundColor: [ 
 
     'rgba(255, 99, 132, 1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)', 
 
     'rgba(255, 99, 132, 1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderColor: [ 
 
     'rgba(255,99,132,1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)', 
 
     'rgba(255,99,132,1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderWidth: 1, 
 
    }] 
 
    }, 
 
    options: { 
 
    legend: { 
 
     display: false 
 
    }, 
 
    scales: { 
 
     yAxes: [{ 
 
     gridLines: { 
 
      display: true 
 
     }, 
 
     ticks: { 
 
      beginAtZero: true 
 
     } 
 
     }], 
 
     xAxes: [{ 
 
     display: true, 
 
     gridLines: { 
 
      display: false 
 
     }, 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="my-chart"></canvas>

Answer 1

Lassen Sie uns hideXAxesWhenChartIsXXS eine neue Option einzuführen. Diese Option aktiviert das Ausblenden aller x-Achsen, wenn die Breite des Diagramms weniger als 480 Pixel beträgt. Die Option hideXAxesWhenChartIsXXS wird vom toggleXAxesDisplayPlugin Plugin gelesen. Wenn die Option definiert ist und true, dann entscheidet das Plugin, ob die X-Achsen angezeigt werden oder nicht, basierend auf der neuen Breite des Diagramms, jedes Mal wenn die Größe des Diagramms geändert wird (was auch das erstmalige Zeichnen des Diagramms abdeckt).

Gespräch ist billig, so here ist der Code. Der Code ist auch unten verfügbar.

// Hides x-axes, when the chart is XXS. 
 
var toggleXAxesDisplayPlugin = { 
 
    // Runs on resize. 
 
    resize: function(chartInstance, newChartSize) { 
 
    // If the option is defined and `true`. 
 
    if (chartInstance.config.options.hideXAxesWhenChartIsXXS) { 
 
     if (newChartSize.width < 480) { 
 
     // Iterate all x-axes. 
 
     chartInstance.config.options.scales.xAxes.forEach(function(axis) { 
 
      // Hide axis. 
 
      axis.display = false; 
 
     }); 
 
     } else { 
 
     // Iterate all x-axes. 
 
     chartInstance.config.options.scales.xAxes.forEach(function(axis) { 
 
      // Show axis. 
 
      axis.display = true; 
 
     }); 
 
     } 
 
    } 
 
    } 
 
}; 
 

 
Chart.pluginService.register(toggleXAxesDisplayPlugin); 
 

 
var allTimeAll = $("#my-chart"); 
 
var allTimeAllChart = new Chart(allTimeAll, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], 
 
    datasets: [{ 
 
     label: 'Confirmed', 
 
     data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'], 
 
     backgroundColor: [ 
 
     'rgba(255, 99, 132, 1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)', 
 
     'rgba(255, 99, 132, 1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderColor: [ 
 
     'rgba(255,99,132,1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)', 
 
     'rgba(255,99,132,1)', 
 
     'rgba(54, 162, 235, 1)', 
 
     'rgba(255, 206, 86, 1)', 
 
     'rgba(75, 192, 192, 1)', 
 
     'rgba(153, 102, 255, 1)', 
 
     'rgba(255, 159, 64, 1)' 
 
     ], 
 
     borderWidth: 1, 
 
    }] 
 
    }, 
 
    options: { 
 
    legend: { 
 
     display: false 
 
    }, 
 
    scales: { 
 
     yAxes: [{ 
 
     gridLines: { 
 
      display: true 
 
     }, 
 
     ticks: { 
 
      beginAtZero: true 
 
     } 
 
     }], 
 
     xAxes: [{ 
 
     display: true, 
 
     gridLines: { 
 
      display: false 
 
     }, 
 
     }] 
 
    }, 
 
    // If this option is defined and `true`, then the plugin's functionality will be activated. 
 
    hideXAxesWhenChartIsXXS: true 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script> 
 
<canvas id="my-chart" width="400" height="400"></canvas>