Front Dashboard模板中脚本配置Chart JS的tooltip与HTML配置效果不一致

你所使用的Front Dashboard模板对ChartJS做了二次封装，封装为HSChartJS组件：

• tooltips配置中的postfix、hasIndicator均为模板扩展的自定义参数，原生ChartJS本身不识别这两个配置，只有通过模板提供的$.HSCore.components.HSChartJS.init()方法初始化图表时，才会解析这类扩展参数、加载模板预设的tooltip样式。你直接使用new Chart()原生方法初始化，跳过了模板的封装逻辑，因此tooltip会显示为原生默认样式，自定义后缀、美化效果都不生效。
• 模板封装的HSChartJS内置了tooltip边界检测逻辑，会自动调整tooltip位置避免超出画布范围被裁剪，原生ChartJS初始化默认没有开启这类适配，因此会出现边缘tooltip被裁剪的问题。
• 你当前JS配置中hasIndicator设为了false，和模板示例的true不一致，也会进一步导致样式差异。

优先推荐使用模板的封装逻辑初始化，避免额外的兼容调整：

• 方案1：将动态配置写入canvas属性后调用模板初始化方法
  修改showChart函数如下即可：

function showChart() {
  const chartConfig = {
    type: 'line',
    data: {
      labels: myOccupancy.LabelList,
      datasets: [
        {
          data: myOccupancy.DataList,
          backgroundColor: ['rgba(55, 125, 255, 0)', 'rgba(255, 255, 255, 0)'],
          borderColor: '#377dff',
          borderWidth: 2,
          pointRadius: 0,
          pointHoverRadius: 0
        }
      ]
    },
    options: {
      scales: {
        yAxes: [{ display: false }],
        xAxes: [{ display: false }]
      },
      hover: {
        mode: 'nearest',
        intersect: false
      },
      tooltips: {
        postfix: '%',
        hasIndicator: true, // 和模板示例配置保持一致
        intersect: false
      },
      legend: {
        display: false
      }
    }
  }
  // 将配置写入canvas的data属性
  $('#occChart').attr('data-hs-chartjs-options', JSON.stringify(chartConfig));
  // 调用模板自带的初始化方法
  $.HSCore.components.HSChartJS.init($('#occChart'));
}

• 方案2：原生初始化手动补全配置
  如果必须使用new Chart()原生方法初始化，需要做两处调整：
  1. 解决裁剪问题：在options.tooltips中添加position: 'nearest'、caretPadding: 10，同时给canvas外层包裹一个设置了overflow: visible的DOM容器
  2. 匹配样式：通过tooltips.callbacks.label手动拼接百分号后缀，再自定义tooltip的CSS样式匹配模板效果，同时开启原生的tooltips.mode: 'index'、intersect: false配置优化交互。

内容的提问来源于stack exchange，提问作者Matt