javascript - 根据窗口宽度更改 Chart.js 选项

Question

我对 Chart.js 和 HTML5 Canvas 还很陌生，但我能够将一些东西放在一起。

我现在需要做的是能够根据窗口的宽度更改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>