chart.js - 如何在一天中的 4 个点放置标签?
问题描述
这个问题是双重的(两种方法来解决)
我想制作一个图表,绘制 24 小时的数据,而不是从午夜开始,并且在一天的四个基点上带有刻度(和相关的网格)。
我不在乎 x 轴是“时间”还是其他任何东西,只要它看起来不错。我见过一个标签任意移动的类别图表,但我只能用每个标签一个数据点来重现它,这需要标签之间有多个数据点。如果我标记所有数据点,我不知道如何跳过标签,这样只有“0:00”、“6:00”、“12:00”和“18:00”可见。
它应该看起来像这样:
这就是我已经走了多远:
function generateData() {
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function randomPoint(date) {
return {
t: date.valueOf(),
y: randomNumber(0, 100)
};
}
var date = moment("2000-01-01T"+"08:30");
var now = moment();
var data = [];
while (data.length <=48) {
data.push(randomPoint(date));
date = date.clone().add(30, 'minute')
}
return data;
}
var cfg = {
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
backgroundColor: 'red',
borderColor: 'red',
data: generateData(),
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
round: 'minute',
unit: 'minute',
stepSize: 360,
displayFormats: {
minute: 'kk:mm'
}
}
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index'
}
}
};
var chart = new Chart('chart1', cfg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart1" height="60"></canvas>
这里的问题是第一个刻度是在 08:30 而不是 12:00。
我试图设置轴的最小值,但这要么将部分数据移出视图(min: moment("2000-01-01T12:00")
),要么在数据开始之前创建一个间隙(min: moment("2000-01-01T06:00")
),这两者都是不可接受的。
function generateData() {
function randomNumber(min, max) {
return Math.random() * (max - min) + min;
}
function randomPoint(date) {
return {
t: date.valueOf(),
y: randomNumber(0, 100)
};
}
var date = moment("2000-01-01T"+"08:30");
var now = moment();
var data = [];
while (data.length <=48) {
data.push(randomPoint(date));
date = date.clone().add(30, 'minute')
}
return data;
}
var cfg = {
data: {
datasets: [{
label: 'CHRT - Chart.js Corporation',
backgroundColor: 'red',
borderColor: 'red',
data: generateData(),
type: 'line',
pointRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
round: 'minute',
unit: 'minute',
stepSize: 360,
displayFormats: {
minute: 'kk:mm'
}
},
ticks: {
min: moment("2000-01-01T06:00"),
}
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index'
}
}
};
var chart = new Chart('chart1', cfg);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart1" height="60"></canvas>
解决方案
花了我一些时间,但我想我得到了答案。
您可以使用 定义刻度并显示它们options.scales.xAxes[0].ticks.source = 'labels'
,但最难的部分是获取 0:00、6:00、12:00 或 18:00 的下一个时间戳。这就是为什么第一个标签的代码相当复杂的原因。如果您想知道任何事情,请告诉我,我可以解释。
应该在您想要的任何时间使用。
完整代码(与此处预览的 JSBin 相同):
let data = {
datasets: [{
label: 'CHRT - Chart.js Corporation',
backgroundColor: 'red',
borderColor: 'red',
type: 'line',
pointRadius: 0,
pointHoverRadius: 0,
fill: false,
lineTension: 0,
borderWidth: 2,
data: []
}]
}
function randomNumber(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
// temp variable for data.datasets[0].data
let datasetData = []
// Fill first dataset
datasetData[0] = {
x: moment("2000-01-01T08:30"),
y: randomNumber(0, 100)
}
// Fill remaining datasets
for (let i = 1; i < 48; i++) {
datasetData[i] = {
x: moment(datasetData[i-1].x).add(30, 'minutes'),
y: randomNumber(0, 100)
}
}
data.datasets[0].data = datasetData
// Fill first label
data.labels = [
moment(datasetData[0].x).hour(moment(datasetData[0].x).hour() + (6 - moment(datasetData[0].x).hour() % 6) % 6).minutes(0)
]
// Fill remaining labels
for (let i = 1; i < 4; i++) {
data.labels.push(moment(data.labels[i-1]).add(6, 'hours'))
}
let options = {
responsive: true,
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
displayFormats: {
hour: 'kk:mm'
}
},
ticks: {
source: 'labels'
}
}],
yAxes: [{
gridLines: {
drawBorder: false
}
}]
},
tooltips: {
intersect: false,
mode: 'index',
callbacks: {
title: function(tooltipItem, data) {
return moment(tooltipItem[0].label).format('YYYY-MM-DD, HH:mm')
}
}
}
}
let chart = new Chart('chart1', {
type: 'line',
data: data,
options: options
});
推荐阅读
- algorithm - 汽车转弯检测算法
- angular - 显示周数的角度 highcharts 问题
- kdb - 检查 kdb 表中是否存在子表
- spring - Spring OAuth2 ResourceServer 依赖地狱
- docker - Traefik配置文件的默认位置可以在Docker官方文件中更改吗?
- c - 为什么 ftell 的返回类型不是 fpos_t?
- reactjs - 将焦点设置在功能组件中的特定按钮上的反应方式?
- css - 单选按钮单击标签颜色更改
- jquery - 旋转木马滑块按钮在 Angular 7 中不起作用
- python - 如何检查字符串中的单个或多个第 n 个字符,然后在新列 Python 中更新