我不确定该怎么做，但我有一些要添加到条形图中的点。但是，当我添加该点时，它最终位于条形图列的中间。我希望它位于列的底部。
我创建了这个小提琴，https://jsfiddle.net/wro10bgp/，作为它上面的绿点。我想把绿点放在列的底部而不是中间。
我怎样才能做到这一点？
const DATE = luxon.DateTime;
function arrayToDate(dateArray) {
return [
DATE
.fromFormat(dateArray[0], "HH:mm")
.toMillis(),
DATE
.fromFormat(dateArray[1], "HH:mm")
.toMillis()
];
}
class Dataset {
constructor(xAxislabels, label) {
this.label = label;
this.xAxisLabels = xAxislabels;
this.data = Array(xAxislabels.length).fill([undefined, undefined]);
this.fill = false;
this.backgroundColor = ['rgba(153, 102, 255, 0.2)'];
this.borderColor = ['rgb(153, 102, 255)'];
this.borderSkipped = false;
this.borderWidth = 1;
this.pointHitRadius = 25;
this.tension = 0.4;
this.dragData = true;
this.tooltip = {
callbacks: {
label: function (item) {
if (!item.parsed._custom) {
console.log("dynamic couldn't parse the item?");
return;
}
const date = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString();
const time_start = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
const time_stop = DATE
.fromSeconds(item.parsed._custom.barEnd / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`
}
}
};
}
// Setter
setData(xAxisLabel, data) {
const pos = this
.xAxisLabels
.indexOf(xAxisLabel);
console.log("pos: ", pos);
this.data[pos] = [
luxon
.DateTime
.fromFormat(data[0], "HH:mm")
.toMillis(),
luxon
.DateTime
.fromFormat(data[1], "HH:mm")
.toMillis()
];
}
}
let myData = new Dataset([
"Sun 19th Feb 2023",
"Mon 20th Feb 2023",
"Tue 21st Feb 2023",
"Wed 22nd Feb 2023",
"Thu 23rd Feb 2023",
"Fri 24th Feb 2023",
"Sat 25th Feb 2023"
], 'task_descript');
myData.setData('Tue 21st Feb 2023', ["10:30", "11:30"]);
const options = {
type: "bar",
data: {
labels: [
"Sun 19th Feb 2023",
"Mon 20th Feb 2023",
"Tue 21st Feb 2023",
"Wed 22nd Feb 2023",
"Thu 23rd Feb 2023",
"Fri 24th Feb 2023",
"Sat 25th Feb 2023"
],
datasets: [
{
type: 'line',
label: 'point',
backgroundColor: "green",
borderColor: "green",
data: [{
y: 'Sun 19th Feb 2023',
x: '09:45'
}]
},
myData, {
label: "",
data: [
arrayToDate([
"08:25", "08:39"
]),
arrayToDate([
"09:45", "09:55"
]),
[undefined, undefined],
[undefined, undefined],
[undefined, undefined],
[undefined, undefined],
[undefined, undefined]
],
backgroundColor: ['rgba(153, 50, 255, 0.2)'],
borderColor: ['rgb(153, 102, 255)'],
borderWidth: 1,
pointHitRadius: 25,
tension: 0.4,
dragData: true,
tooltip: {
callbacks: {
label: function (item) {
/* if (!item.parsed._custom) {
console.log("couldn't parse the item?");
return;
} */
const date = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString();
const time_start = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
const time_stop = DATE
.fromSeconds(item.parsed._custom.barEnd / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`;
}
}
}
}, {
label: "",
data: [
arrayToDate([
"08:39", "08:59"
]),
arrayToDate([
"08:39", "09:00"
])
],
backgroundColor: "blue",
borderWidth: 1,
pointHitRadius: 25,
tension: 0.4,
dragData: true,
tooltip: {
callbacks: {
label: function (item) {
if (!item.parsed._custom) {
console.log("Tis couldn't parse the item?");
return;
}
const date = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString();
const time_start = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
const time_stop = DATE
.fromSeconds(item.parsed._custom.barEnd / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`;
}
}
}
}, {
label: "",
data: [
arrayToDate([
"10:39", "15:59"
]),
arrayToDate([
"11:00", "11:30"
])
],
borderSkipped: false,
backgroundColor: ['rgba(30, 130, 76, 0.2)'],
borderColor: ['red'],
borderWidth: 1,
pointHitRadius: 25,
tension: 0.4,
dragData: true,
tooltip: {
callbacks: {
label: function (item) {
if (!item.parsed._custom) {
console.log("couldn't parse the item?");
return;
}
const date = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString();
const time_start = DATE
.fromSeconds(item.parsed._custom.barStart / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
const time_stop = DATE
.fromSeconds(item.parsed._custom.barEnd / 1000)
.toLocaleString(DATE.TIME_24_SIMPLE);
return `${item.dataset.label} ${date} ${time_start} - ${time_stop}`;
}
}
}
}
]
},
options: {
indexAxis: "y",
onHover: function (e) {
const point = e
.chart
.getElementsAtEventForMode(e, 'nearest', {
intersect: true
}, false)
if (point.length)
e.native.target.style.cursor = 'grab'
else
e.native.target.style.cursor = 'default'
},
scales: {
y: {
stacked: true
},
x: {
parsing: false,
stacked: false,
position: "top",
type: "time",
time: {
unit: "hour"
},
min: "07:00",
max: "19:00"
}
},
plugins: {
legend: {
display: false
},
dragData: {
round: 1,
showTooltip: true,
onDragStart: function (e, datasetIndex, index, curValue) {
console.log(datasetIndex, index, curValue);
// console.log("element: ", element);
},
onDrag: function (e, datasetIndex, index, value) {
e.target.style.cursor = "grabbing";
// prohibit values < 0
// if (value < 0) return false
console.log(value);
//console.log(e, datasetIndex, index, value);
},
onDragEnd: function (e, datasetIndex, index, value) {
e.target.style.cursor = "default";
// console.log(datasetIndex, index, value)
}
}
}
}
}
let ctx = document
.getElementById("chartJSContainer")
.getContext("2d");
const myChart = new Chart(ctx, options);
-编辑- 另一种可能性是放置一条小垂直线而不是一个点？