javascript - Chartjs 2.7.3:在正确的 X 位置轴上设置 Y 数据
问题描述
data: {
labels: ['29 Oct, 18', '30 Oct, 18', '02 Nov, 18', '14 Nov, 18', '15 Nov, 18', '19 Nov, 18', '20 Nov, 18', '28 Nov, 18'],
datasets: [{
pointRadius: 0,
label: 'Positive',
lineTension: 0,
data: [{'x': '15 Nov, 18', 'y': 18636}],
borderWidth: 1,
backgroundColor: 'rgba(0, 255, 0, 0.5)',
},{
pointRadius: 0,
label: 'Negative',
lineTension: 0,
data: [{'x': '29 Oct, 18', 'y': -20480}, {'x': '30 Oct, 18', 'y': -284}, {'x': '02 Nov, 18', 'y': -1625}, {'x': '14 Nov, 18', 'y': -6622}, {'x': '15 Nov, 18', 'y': -12991}, {'x': '19 Nov, 18', 'y': -1645}, {'x': '20 Nov, 18', 'y': -1230}, {'x': '28 Nov, 18', 'y': -39612}],
borderWidth: 1,
backgroundColor: 'rgba(255, 0, 0, 0.5)',
}]
},
问题是绿色条位于错误的 x 位置。它目前是“29 okt”,但我用“15 nov”标记它
如何将这些数据集设置到正确的 x 位置
解决方案
由于您指定了x/y
数据集的坐标,因此您必须在图表选项中设置xAxes
比例类型。time
var options = {
scales: {
xAxes: [
{
type: "time"
}
]
}
};
有关所有可能的配置,请参阅官方文档或检查以下工作示例中使用的选项。
重要提示:您必须将数据集中的日期格式更改为类似的格式,'YYYY-MM-DD'
否则moment
会引发此警告。
弃用警告:提供的值不是可识别的 RFC2822 或 ISO 格式。moment 构造回退到 js Date(),这在所有浏览器和版本中并不可靠。
var data = {
labels: [
"2018-10-29",
"2018-10-30",
"2018-11-02",
"2018-11-14",
"2018-11-15",
"2018-11-19",
"2018-11-20",
"2018-11-28"
],
datasets: [{
pointRadius: 0,
label: "Positive",
lineTension: 0,
data: [{
x: "2018-11-15",
y: 18636
}],
borderWidth: 1,
backgroundColor: "rgba(0, 255, 0, 0.5)"
},
{
pointRadius: 0,
label: "Negative",
lineTension: 0,
data: [{
x: "2018-10-29",
y: -20480
},
{
x: "2018-10-30",
y: -284
},
{
x: "2018-11-02",
y: -1625
},
{
x: "2018-11-14",
y: -6622
},
{
x: "2018-11-15",
y: -12991
},
{
x: "2018-11-19",
y: -1645
},
{
x: "2018-11-20",
y: -1230
},
{
x: "2018-11-28",
y: -39612
}
],
borderWidth: 1,
backgroundColor: "rgba(255, 0, 0, 0.5)"
}
]
};
var options = {
scales: {
xAxes: [{
type: "time",
distribution: 'series',
time: {
displayFormats: {
day: 'D MMM, YY'
}
},
ticks: {
source: "labels"
},
gridLines: {
display: false
}
}]
}
};
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: "bar",
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart" width="300" height="100"></canvas>
推荐阅读
- html - 在同一行显示嵌套的 div
- azure-active-directory - GraphAPI Schema Extensions 不会出现在消息中
- python - 无法验证游戏中的用户输入
- textview - SwiftUI:当我点击离开而不是按 Return 时触发 onCommit
- javascript - 无法读取未定义的属性“offsetTop”
- ios - 如何为 SwiftUI 列表中的多行删除过渡设置动画?
- angular - Mat-icon:当按下一个按钮时,所有的图标都会改变
- php - Laravel 政策:如何做出“代表”行为
- haskell - 如何在 Haskell 中通过选择之间的状态从“m”备选方案中概括选择大小为“n”的子集
- html - 在模态中添加和获取选中的复选框