vue绘制频率直方图，鼠标放上去还可以显示详细信息。请给我完整代码

好的，以下是一个简单的 Vue 绘制频率直方图，并且鼠标放上去可以显示详细信息的完整代码：

<template>
  <div>
    <canvas ref="chartCanvas"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
      chartLabels: ["0-10", "10-20", "20-30", "30-40", "40-50", "50-60", "60-70", "70-80", "80-90", "90-100"],
      chartOptions: {
        responsive: true,
        tooltips: {
          enabled: false,
          custom: this.customTooltip
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      let ctx = this.$refs.chartCanvas.getContext("2d");
      let chart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: this.chartLabels,
          datasets: [{
            label: "Frequency",
            data: this.chartData,
            backgroundColor: "#3e95cd"
          }]
        },
        options: this.chartOptions
      });
    },
    customTooltip(tooltip) {
      // Hide default tooltip
      document.getElementsByClassName("chartjs-tooltip")[0].style.display = "none";

      // Create tooltip element
      let tooltipEl = document.createElement("div");
      tooltipEl.classList.add("custom-tooltip");

      // Add text to tooltip element
      if (tooltip.body) {
        let title = tooltip.title[0];
        let value = tooltip.body[0].lines[0].split(": ")[1];
        tooltipEl.innerHTML = `<div>${title}</div><div>${value}</div>`;
      }

      // Position tooltip element
      tooltipEl.style.position = "absolute";
      tooltipEl.style.left = `${tooltip.caretX}px`;
      tooltipEl.style.top = `${tooltip.caretY - 50}px`;

      // Append tooltip element to body
      document.body.appendChild(tooltipEl);
    }
  }
}
</script>

<style>
.custom-tooltip {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 14px;
  padding: 8px;
  border-radius: 4px;
}
</style>

这段代码使用了 Chart.js 库来绘制直方图。在 `chartData` 中设置了每个区间的频率，在 `chartLabels` 中设置了每个区间的标签。`chartOptions` 控制图表的样式和行为。在 `customTooltip` 方法中创建了自定义的 tooltip，并且使用了 `tooltip.caretX` 和 `tooltip.caretY` 计算 tooltip 的位置。最后在样式中设置 `custom-tooltip` 的样式。