javascript - Chartjs 默认弃用警告

标签 javascript charts chart.js

我在 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;

最佳答案

全局更改栏 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>

To find out about other valid options contained in Chart.defaults, simply log it to the console (console.log(Chart.defaults)) and search for the option name.

关于javascript - Chartjs 默认弃用警告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59730917/

相关文章:

javascript - 如何根据对象数组中的属性值获取唯一计数

javascript - ParameterDocID 仅获取我的 DocumentUniqueID 的 6 位数字

javascript - Ionic 3 + Angular 4 + chart.js - 从数组加载数据

chart.js - 在chart.js中使用CSS变量(颜色)- "var(--primaryColor)"无法正常工作

javascript - 如何使用 chart.js version2 在折线图的两条线之间添加阴影

javascript - 试图让移动菜单架工作

javascript - 使用 DatePicker(仅月日,无年份)、Moment.js 和 JSON 来填充事件或报价

javascript - 如何在chart.js中为饼图添加标签

java - Vaadin 中图表配置的序列化

java - 在Java中绘制高斯曲线