sample graph:
Implemented functions: Gantt charts, scatter charts, and scatter charts only display labels in the canvas
code part:
<template>
<div id="container" style="min-width: 400px; height: 400px"></div>
</template>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
ganttData: [
{<!-- -->
name: "Task 1",
x: new Date("2022-12-01 09:00:00").getTime(),
x2: new Date("2022-12-11 09:00:00").getTime(),
y: 0,
},
{<!-- -->
name: "Task 2",
x: new Date("2022-12-08 09:00:00").getTime(),
x2: new Date("2022-12-10 19:20:40").getTime(),
y: 1,
},
{<!-- -->
name: "Task 3",
x: new Date("2022-12-06 09:00:00").getTime(),
x2: new Date("2022-12-20 19:20:40").getTime(),
y: 2,
},
{<!-- -->
name: "Task 4",
x: new Date("2022-12-18 09:00:00").getTime(),
x2: new Date("2022-12-22 19:20:40").getTime(),
y: 3,
},
{<!-- -->
name: "Task 5",
x: new Date("2022-12-05 09:00:00").getTime(),
x2: new Date("2022-12-15 19:20:40").getTime(),
y: 2,
},
],
scatterData: [
{<!-- -->
name: "Plan 1",
x: new Date("2022-12-06 09:00:00").getTime(),
y: 0,
},
{<!-- -->
name: "Plan 2",
x: new Date("2022-12-05 09:00:00").getTime(),
y: 1,
},
{<!-- -->
name: "Plan 3",
x: new Date("2022-12-06 09:00:00").getTime(),
y: 2,
},
{<!-- -->
name: "Plan 4",
x: new Date("2022-12-12 09:00:00").getTime(),
y: 3,
},
{<!-- -->
name: "Plan 5",
x: new Date("2022-12-05 09:00:00").getTime(),
y: 2,
},
],
scatterData2: [
{<!-- -->
name: "12",
x: new Date("2022-12-01 09:00:00").getTime(),
y: 0,
},
{<!-- -->
name: "33",
x: new Date("2022-12-02 09:00:00").getTime(),
y: 1,
},
{<!-- -->
name: "1065",
x: new Date("2022-12-03 09:00:00").getTime(),
y: 2,
},
{<!-- -->
name: "123",
x: new Date("2022-12-14 09:00:00").getTime(),
y: 2,
},
{<!-- -->
name: "4",
x: new Date("2022-12-05 09:00:00").getTime(),
y: 2,
},
{<!-- -->
name: "4",
x: new Date("2022-12-06 09:00:00").getTime(),
y: 2,
},
{<!-- -->
name: "4",
x: new Date("2022-12-07 09:00:00").getTime(),
y: 2,
},
],
};
},
mounted() {<!-- -->
let month = "2022-12";
const moment = this. $moment;
const WEEKS = {<!-- -->
0: "Day",
1 a",
2: "two",
3: "Three",
4: "four",
5: "five",
6: "six",
};
this.$highcharts.setOptions({<!-- -->
global: {<!-- -->
useUTC: false, // do not use utc time
},
lang: {<!-- -->
noData: "No data yet",
},
});
this.$highcharts.ganttChart("container", {<!-- -->
series: [
{<!-- -->
type: "gantt",
name: "Device",
data: this.ganttData,
dataLabels: {<!-- -->
enabled: true,
format: "{point.name}",
},
tooltip: {<!-- -->
pointFormatter: function () {<!-- -->
// console. log(this);
return `<div>
<span style="color:{point.color}">\●</span> ${<!-- -->this.name}
<br />
Start time: ${<!-- -->moment(this.x).format("YYYY-MM-DD HH:mm:ss")}
<br />
End time: ${<!-- -->moment(this.x2).format("YYYY-MM-DD HH:mm:ss")}
</div>`;
},
},
},
{<!-- -->
type: "scatter",
name: "plan",
data: this.scatterData,
stickyTracking: false, // sticky tracking is true by default, you can remove the comment to see the effect
marker: {<!-- -->
enabled: true,
symbol: "circle",
radius: 6,
},
tooltip: {<!-- -->
pointFormat:
'<span style="color:{point.color}">\●</span> <b>{point.name}</b><br/>',
},
findNearestPointBy: "xy",
},
{<!-- -->
type: "scatter",
name: "Task",
data: this.scatterData2,
stickyTracking: false,
enableMouseTracking: false, // hide his tooltip
marker: {<!-- -->
enabled: false, // Do not display the pattern of the scatter plot
states: {<!-- -->
hover: {<!-- -->
enabled: false,
},
},
},
tooltip: {<!-- -->
pointFormat:
'<span style="color:{point.color}">\●</span> <b>{point.name}</b><br/>',
},
dataLabels: {<!-- -->
enabled: true,
align: "center",
verticalAlign: "middle",
crop: false,
overflow: "none",
style: {<!-- -->
fontWeight: 300,
fontSize: "14px",
color: "#333",
textOutline: "1px contrast",
},
formatter: function () {<!-- -->
return this.point.name;
},
},
},
],
xAxis: [
{<!-- -->
min: moment(month).valueOf(),
max: moment(month).endOf("month").valueOf(),
gridLineEidth: 1,
minTickInterval: 1000 * 60 * 60 * 24,
currentDateIndicator: true,
tickPixelInterval: 70,
grid: {<!-- -->
borderWidth: 1, // The border width of the right header
cellHeight: 35, // the height of the date header on the right
},
labels: {<!-- -->
align: "center",
formatter: function () {<!-- -->
return `Week ${<!-- -->WEEKS[moment(this.value).day()]}`;
},
},
},
{<!-- -->
gridLineWidth: 1,
minTickInterval: 1000 * 60 * 60 * 24,
tickPixelInterval: 100,
grid: {<!-- -->
borderWidth: 1, // The border width of the right header
cellHeight: 30, // the height of the date header on the right
},
labels: {<!-- -->
align: "center",
formatter: function () {<!-- -->
return `${<!-- -->moment(this.value).format("D")}`;
},
},
},
],
yAxis: {<!-- -->
categories: ["Category 1", "Category 2", "Category 3", "Category 4"],
reversed: true,
title: {<!-- -->
text: "Task classification",
},
},
});
},
};
</script>