Question

我要在Chartjs（v2.9.3）中设置以下默认值，以更改条形图的默认外观：

Chart.defaults.bar.scales.xAxes[0].categoryPercentage = .95;

这会导致以下弃用警告：

bar chart: "scales.[x/y]Axes.categoryPercentage" is deprecated. Please use "dataset.categoryPercentage" instead

但是我无法做到这一点，其中包括我尝试过的其他方法：

Chart.defaults.bar.dataset.categoryPercentage = 1;
Chart.defaults.bar.datasets[0].categoryPercentage = 1;
Chart.defaults.global.bar.dataset.categoryPercentage = 1;
Chart.defaults.global.bar.datasets[0].categoryPercentage = 1;

是否有很好的资源来找到正确的命令来设置默认值？不幸的是，原本优秀的文档在这方面还很不完善。

以上并不是我正在努力的唯一默认设置。

例如，以下操作不会执行任何操作（即使Chart.defaults.global.hover.animationDuration = 50;有效）：

Chart.defaults.global.hover.mode = 'index';
Chart.defaults.global.hover.intersect = true;

Answer 1

以下是用于全局更改栏categoryPercentage的正确语法：

Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;

这是一个工作示例：

Chart.defaults.global.datasets.bar.categoryPercentage = 0.95;

var canvas = document.getElementById('myChart');
var data = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [{
            label: "Occurrences", 
            data: [3, 5, 2, 4, 6],
            fill: false,
            backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
            borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
            borderWidth: 1
        }]
};
var option = {
	scales: {
  	yAxes:[{
        ticks: {
          beginAtZero: true
        }
    }]
  }
};

var myBarChart = Chart.Bar(canvas, {
  data:data,
  options:option
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

要了解Chart.defaults中包含的其他有效选项，只需将其登录到控制台（console.log(Chart.defaults)）并搜索选项名称。

Answer 2

你不需要全局设置，我其实建议你按照documentation为每个图表设置。

var canvas = document.getElementById('myChart');

var data = {
  labels: ["A", "B", "C", "D", "E"],
  datasets: [{
    label: "Occurrences",
    data: [3, 5, 2, 4, 6],
    fill: false,
    backgroundColor: ["rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)"],
    borderColor: ["rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(54, 162, 235)"],
    borderWidth: 1
  }]
};

var option = {
  datasets: {
    bar: {
      categoryPercentage: 0.95
    }
  },
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
};

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: option
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Chartjs默认弃用警告

2 个答案: