问题
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)',
}]
},
The problem is that the green bar is at the wrong x position. It is currently at '29 okt' but I tagged it with '15 nov'
How do I set those datasets to the correct x position
回答1:
Since you specified the x/y
coordinates of your data set, you have to set your xAxes
scale type as time
in your chart options.
var options = {
scales: {
xAxes: [
{
type: "time"
}
]
}
};
See official docs for all possible configurations or check the options used in the working example below.
Important: You have to change the date format in your data set to something like 'YYYY-MM-DD'
otherwise moment
would throw this warning.
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions.
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>
来源:https://stackoverflow.com/questions/53934008/chartjs-2-7-3-set-y-data-at-the-correct-x-position-axis