根据窗口宽度更改 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轴，每次调整图表大小（包括第一次绘制图表） )。

Talk 很便宜，所以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>