基於窗口寬度更改chart.js選項

Question

我對chart.js和HTML5畫布很新穎，但我能夠把東西放在一起。

我現在需要做的是能夠根據窗口的寬度更改xAxes.display。我認爲這涉及scales.xAxes.display項目中的function，但我不知道如何。任何建議，我可以找到更多的信息，如何做到這一點？

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

讓我們介紹一個新的選項hideXAxesWhenChartIsXXS。當圖表寬度小於480像素時，此選項將隱藏所有x軸。 hideXAxesWhenChartIsXXS選項將由toggleXAxesDisplayPlugin插件讀取。如果選項已定義並且true，那麼插件會根據圖表的新寬度決定是否顯示x軸，每次圖表調整大小時（也包括圖表的第一次繪製）。

說話很便宜，所以here是代碼。該代碼也在下面提供。

// 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>