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>