Javascript 图表 JS - xAxes 的使用时间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46626871/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Chart JS - Use time for xAxes
提问by Peter
i added this code
我添加了这个代码
scales:
{
xAxes:
[{
type: 'time',
time:
{
unit: 'month',
displayFormats: { month: 'MM' },
max: '2017-10-09 18:43:53',
min: '2017-10-02 18:43:53'
}
}]
},
to the options but it does not work. Any ideas what i'm making wrong?
到选项，但它不起作用。任何想法我做错了什么？
FIDDLE ->https://jsfiddle.net/o473y9pw/
回答by ?????
Since you wish to use time for x-axis, your labelsarray should be an array of date/time string (labelsarray is correspondent to x-axis).
由于您希望将时间用于 x 轴，因此您的labels数组应该是一个日期/时间字符串labels数组（数组对应于 x 轴）。
You would also need to set the parserproperty (to parse the date/time correctly), and x-axis' ticks sourceto data(to properly generate x-axis ticks).
您还需要将parser属性（以正确解析日期/时间）和 x 轴刻度源设置为（以正确生成 x 轴刻度）。data
UPDATE
更新
If you only have a min and max date then, you can create a nice little pluginto populate the labels(date)array dynamically, as such :
如果您只有最小和最大日期，则可以创建一个不错的小插件来动态填充labels（日期）数组，如下所示：
plugins: [{
beforeInit: function(chart) {
var time = chart.options.scales.xAxes[0].time, // 'time' object reference
// difference (in days) between min and max date
timeDiff = moment(time.max).diff(moment(time.min), 'd');
// populate 'labels' array
// (create a date string for each date between min and max, inclusive)
for (i = 0; i <= timeDiff; i++) {
var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
chart.data.labels.push(_label);
}
}
}]
note:moment.jsis used to make calculations easier.
注意：moment.js用于使计算更容易。
??????? ?x??????
( for demonstration purposes, I've changed the time unitto day)
??????? ？X？？？？？?
（出于演示目的，我已将时间更改unit为day）
$(document).ready(function() {
new Chart(document.getElementById("chartBox"), {
type: 'line',
data: {
datasets: [{
data: [12, 19, 3, 5, 2, 3, 32, 15],
label: "",
borderWidth: 2,
borderColor: "#3e95cd",
fill: false,
pointRadius: 0
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-MM-DD HH:mm:ss',
unit: 'day',
displayFormats: {
day: 'ddd'
},
min: '2017-10-02 18:43:53',
max: '2017-10-09 18:43:53'
},
ticks: {
source: 'data'
}
}]
},
legend: {
display: false
},
animation: {
duration: 0,
},
hover: {
animationDuration: 0,
},
responsiveAnimationDuration: 0
},
plugins: [{
beforeInit: function(chart) {
var time = chart.options.scales.xAxes[0].time, // 'time' object reference
timeDiff = moment(time.max).diff(moment(time.min), 'd'); // difference (in days) between min and max date
// populate 'labels' array
// (create a date string for each date between min and max, inclusive)
for (i = 0; i <= timeDiff; i++) {
var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
chart.data.labels.push(_label);
}
}
}]
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="chartBox"></canvas>回答by G?khan Kurt
The dataset should be an array of objects with properties x for time and y for value. How else could you draw the chart, right?
数据集应该是一个对象数组，其属性 x 表示时间，y 表示值。你还能怎么画图表，对吧？
$(document).ready(function() {
var data = [{
x: new moment().add(-10, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-8, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-6, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-4, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-2, "months"),
y: Math.random() * 100
},
{
x: new moment().add(-0, "months"),
y: Math.random() * 100
},
];
new Chart(document.getElementById("chartBox"), {
type: 'line',
data: {
datasets: [{
data: data,
borderColor: "#3e95cd",
fill: false
}]
},
options: {
scales: {
xAxes: [{
type: 'time'
}]
},
legend: false
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<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.7.0/Chart.bundle.min.js"></script>
<canvas id="chartBox"></canvas>回答by Pratheeswaran
If the xAxis label is in date formatuse this code
如果xAxis 标签是日期格式，请使用此代码
time:
{
format: 'MM',
unit: 'month',
displayFormats: { month: 'MM' },
max: '2017-10-09 18:43:53',
min: '2017-10-02 18:43:53'
}
If the xAxis label is as what u used numeralsuse
如果x轴的标签是什么ü用数字用
time:
{
format: 'MM',
unit: 'month',
parser:'MM',
displayFormats: { month: 'MM' },
max: '2017-10-09 18:43:53',
min: '2017-00-02 18:43:53'
}
回答by Lee Han Kyeol
You might want to change a few things.
您可能想要更改一些内容。
Your data should include timedata.
If you set scale unit to be
month, your min max should be more than one month to see the actual scales.
您的数据应包括时间数据。
如果您将比例单位设置为
month，则您的 min max 应该超过 1 个月才能看到实际比例。
Here's simplified working example.
这是简化的工作示例。
