javascript - Chart.js 中是否有针对 beginAtZero 的全局设置?

标签 javascript chart.js

我知道我可以为每个图表设置选项,例如:

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}

我使用了很多图表,并希望所有图表的 yaxis 默认从零开始。

我正在使用 Chart.js 2.3.0。

最佳答案

是的,ChartJS 中有一个beginAtZero 的全局设置,您可以按照以下方式设置它,使所有图表的yAxes 从零开始...

Chart.defaults.scale.ticks.beginAtZero = true; //set this at the beginning of your code

这里有一个小例子......

Chart.defaults.scale.ticks.beginAtZero = true;

var ctx = document.getElementById("chart1").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [5, 6, 7, 8],
        datasets: [{
						label: "chart # 1",
            data: [5, 6, 7, 8],
            backgroundColor: 'rgba(255, 99, 132, 0.3)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1
        }]
    }
});

var ctx = document.getElementById("chart2").getContext("2d");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [9, 10, 11, 12],
        datasets: [{
						label: "chart # 2",
            data: [9, 10, 11, 12],
            backgroundColor: 'rgba(54, 162, 235, 0.3)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>

关于javascript - Chart.js 中是否有针对 beginAtZero 的全局设置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43354038/

相关文章:

javascript - Chart.js 两个 y 轴折线图工具提示值对于第二个 y 轴不正确

javascript - 无法在不同选项卡中渲染多个响应式 Canvas 图

javascript - 如何通过 javascript 或 jquery 获取准确的当前城市名称?

javascript - 如何等到所有商店在 ExtJs 中同步?

php - 我需要一个可以与 PHP(服务器端)和 Javascript(客户端)一起使用的模板系统(基于 XML)

javascript - ASP.NET Core Razor 页面 - 获取要在 Chart.js 图表上显示的列表数据

user-interface - Chart.js 圆角边缘和文本居中的 donut

chart.js - ChartJS : Limit label's length on an axis and show a tooltip on hover?

javascript - 必须多次运行 gulp 才能获得样式更改

javascript - reduxReact-native 中的搜索功能