javascript - 如何在 chart.js 中更改 X 轴间隔
问题描述
现在我正在使用“chart.js”,我从服务器接收动态月度报告数据。x 轴上有 31 个数据,我想将 x 轴值显示为 5 的倍数(5、10、15、20、25、30)。
我们可以通过以下方法做到这一点,但只能作为静态值。
var thisYearData = {
labels: ["Jul 5", "Jul 10", "Jul 15", "Jul 20", "Jul 25", "Jul 30"],
datasets: [{
label: "This year dataset",
fillColor: "#9C2E9D",
strokeColor: "#9C2E9D",
pointColor: "transparent",
pointStrokeColor: "transparent",
pointHighlightFill: "#fff",
pointHighlightStroke: "#9C2E9D",
data: [45, 62, 15, 78, 58, 98]
}]
};
但我想动态提供一个间隔。
我们可以通过以下方法为 Y 轴提供间隔。
var lastYearChart = new Chart(lastYearCTX).LineAlt2(lastYearData, {
datasetFill: false,
scaleSteps: 5,
scaleStepWidth: 20,
scaleStartValue: 0
});
但是 scaleSteps: 5, scaleStepWidth: 20,我需要 X 轴的这些选项。
正如您可以从以下屏幕截图中看到的当前输出。
我的脚本:
var flwrgrwth = document.getElementById("followergrowth").getContext("2d");
Chart.types.Line.extend({
name: "LineAlt2",
initialize: function() {
Chart.types.Line.prototype.initialize.apply(this, arguments);
var ctx = this.chart.ctx;
var originalStroke = ctx.stroke;
ctx.stroke = function() {
ctx.save();
originalStroke.apply(this, arguments)
ctx.restore();
}
}
});
var flwrgrwthchart = {
labels: data.ltxt_array,
datasets: [{
label: "Twitter Follower Growth",
fillColor: "#54c0eb",
strokeColor: "#54c0eb",
pointColor: "transparent",
pointStrokeColor: "transparent",
pointHighlightFill: "#fff",
pointHighlightStroke: "#54c0eb",
data: data.lval_array,
}]
};
var twitflwrgrwthscale = new Chart(flwrgrwth).LineAlt2(flwrgrwthchart, {
datasetFill: false,
scaleShowVerticalLines: false,
datasetStrokeWidth: 2,
scaleFontSize: 10,
scaleFontColor: '#111111',
scaleGridLineColor: '#f5f5f5',
scaleLineColor: '#f5f5f5',
scaleOverride: true,
scaleSteps: 5,
scaleStepWidth: 20,
scaleStartValue: 0
});
解决方案
我认为您使用数据字符串作为标签,因此任何内置逻辑都不起作用。
您可以根据选定的日期范围和间隔动态创建标签。
var labels = [];
// get interval
var interval = 5;
//Get start date
var date_start = new Date("July 5");
for ( var i = 0; i <= 30; i += interval) {
//Set date
date_start.setDate(date_start.getDate() + interval);
//get Month
var month_name = date_start.toLocaleString(navigator.language, { month: "short" });
//Add to labels
labels.push(month_name + " " + date_start.getDate());
}
推荐阅读
- android-studio - Android Studio 4.1 - 插件“安装 Apk”不兼容
- asp.net - 我可以使用 Windows 窗体 GUI 创建 ASP.NET Core Web 服务吗?
- node.js - rate-limiter-flexible + 每个用户的计划使用情况
- python - 在python中的列上没有预先形成一种热编码的情况下获取行之间的jaccard距离
- html - index.html 和其他 html 文件应该放在哪里:根目录或 dist/build 文件夹?
- windows - Sleep() 睡眠时间过长
- mysql - 为 where 子句和 order_by 创建 MYSQL 索引
- python - Error_Running_Generate_Function_BART_module
- spring-boot - Spring Batch Composite Item Writer 事务管理
- python-3.x - 为什么在 ResampleImageFilter 执行期间 SimpleITK 会崩溃?