highcharts的甘特图和散点图混合使用

示例图：

实现的功能：甘特图、散点图、散点图在画布中只显示label

注意：需要引入highcharts-gantt.jshighcharts-gantt.js下载地址，moment.js
代码部分：

<template>
  <div id="container" style="min-width: 400px; height: 400px"></div>
</template>

<script>
export default {
  data() {
    return {
      ganttData: [
        {
          name: "任务1",
          x: new Date("2022-12-01 09:00:00").getTime(),
          x2: new Date("2022-12-11 09:00:00").getTime(),
          y: 0,
        },
        {
          name: "任务2",
          x: new Date("2022-12-08 09:00:00").getTime(),
          x2: new Date("2022-12-10 19:20:40").getTime(),
          y: 1,
        },
        {
          name: "任务3",
          x: new Date("2022-12-06 09:00:00").getTime(),
          x2: new Date("2022-12-20 19:20:40").getTime(),
          y: 2,
        },
        {
          name: "任务4",
          x: new Date("2022-12-18 09:00:00").getTime(),
          x2: new Date("2022-12-22 19:20:40").getTime(),
          y: 3,
        },
        {
          name: "任务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: "计划1",
          x: new Date("2022-12-06 09:00:00").getTime(),
          y: 0,
        },
        {
          name: "计划2",
          x: new Date("2022-12-05 09:00:00").getTime(),
          y: 1,
        },
        {
          name: "计划3",
          x: new Date("2022-12-06 09:00:00").getTime(),
          y: 2,
        },
        {
          name: "计划4",
          x: new Date("2022-12-12 09:00:00").getTime(),
          y: 3,
        },
        {
          name: "计划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: "日",
      1: "一",
      2: "二",
      3: "三",
      4: "四",
      5: "五",
      6: "六",
    };
    this.$highcharts.setOptions({
      global: {
        useUTC: false, // 不使用utc时间
      },
      lang: {
        noData: "暂无数据",
      },
    });
    this.$highcharts.ganttChart("container", {
      series: [
        {
          type: "gantt",
          name: "设备",
          data: this.ganttData,
          dataLabels: {
            enabled: true,
            format: "{point.name}",
          },
          tooltip: {
            pointFormatter: function () {
              // console.log(this);
              return `<div>
                <span style="color:{point.color}">\u25CF</span> ${this.name}  
                <br />
                开始时间：${moment(this.x).format("YYYY-MM-DD HH:mm:ss")}
                <br />
                结束时间：${moment(this.x2).format("YYYY-MM-DD HH:mm:ss")}
              </div>`;
            },
          },
        },
        {
          type: "scatter",
          name: "计划",
          data: this.scatterData,
          stickyTracking: false, // 粘性跟踪默认是 true，可以去掉注释查看效果
          marker: {
            enabled: true,
            symbol: "circle",
            radius: 6,
          },
          tooltip: {
            pointFormat:
              '<span style="color:{point.color}">\u25CF</span> <b>{point.name}</b><br/>',
          },
          findNearestPointBy: "xy",
        },
        {
          type: "scatter",
          name: "任务",
          data: this.scatterData2,
          stickyTracking: false,
          enableMouseTracking: false, // 隐藏他的tooltip
          marker: {
            enabled: false, // 不显示散点图的图案
            states: {
              hover: {
                enabled: false,
              },
            },
          },
          tooltip: {
            pointFormat:
              '<span style="color:{point.color}">\u25CF</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, // 右侧表头边框宽度
            cellHeight: 35, // 右侧日期表头高度
          },
          labels: {
            align: "center",
            formatter: function () {
              return `周${WEEKS[moment(this.value).day()]}`;
            },
          },
        },
        {
          gridLineWidth: 1,
          minTickInterval: 1000 * 60 * 60 * 24,
          tickPixelInterval: 100,
          grid: {
            borderWidth: 1, // 右侧表头边框宽度
            cellHeight: 30, // 右侧日期表头高度
          },
          labels: {
            align: "center",
            formatter: function () {
              return `${moment(this.value).format("D")} `;
            },
          },
        },
      ],
      yAxis: {
        categories: ["分类1", "分类2", "分类3", "分类4"],
        reversed: true,
        title: {
          text: "任务分类",
        },
      },
    });
  },
};
</script>

由于散点图的标签如果对应的值占的宽度较宽，highcharts会自动加上highcharts-data-label-hidden 类，这是 Highcharts 在数据标签超出图表区域时自动添加的类名，用于隐藏超出区域的数据标签。

解决方法：allowOverlap: true, // 显示所有数据标签而不重叠

{
   type: "scatter",
   name: "量",
   zIndex: 3,
   data: this.qtyLabelData,
   stickyTracking: false,
   enableMouseTracking: false, // 隐藏他的tooltip
   marker: {
     enabled: false, // 不显示散点图的图案
     states: {
       hover: {
         enabled: false,
       },
     },
   },
   cursor: "default",
   dataLabels: {
     allowOverlap: true, // 显示所有数据标签而不重叠
     // distance: 60, // 确保相邻散点的数据标签不被隐藏
     // crop: false, // 不裁剪数据标签
     // overflow: "none", // 不强制放置数据标签
     enabled: true,
     align: "center",
     verticalAlign: "middle",
     crop: false,
     overflow: "none",
     style: {
       fontWeight: 300,
       fontSize: "10px",
       color: "#333",
     },
     formatter: function () {
       return this.point.name;
     },
   },
 },

如果散点图和甘特图数据重叠，可以将散点图的y坐标适当加减一点

// 在绘图之前，将散点图的数据纵坐标加0.4，避免数据点重叠
this.scatterData2.forEach((i) => {
	i.y += 0.4
})