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',但我将其标记为'11 nov'
如何将这些数据集设置为正确的x位置
答案 0 :(得分:3)
由于您指定了数据集的x/y
坐标,因此必须在图表选项中将xAxes
比例类型设置为time
。
var options = {
scales: {
xAxes: [
{
type: "time"
}
]
}
};
有关所有可能的配置,请参见official docs或检查以下工作示例中使用的选项。
重要提示:您必须将数据集中的日期格式更改为类似'YYYY-MM-DD'
的格式,否则moment
会抛出此warning。
弃用警告:提供的值不在公认的RFC2822中或 ISO格式。的建设回落到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>