在highchart儀表vuejs中顯示帶有文本的標記

Question

我想顯示一個帶有文本的標記，以在我的 highchart 儀表中顯示一個目標。 我已經顯示了如下圖所示的標記。 我想在標記旁邊顯示一個 label 以顯示一些文本

我在網上找到了一些我們使用數據標簽的代碼，但是 label 是使用 x,y 坐標手動定位的。 我的數據來自數據庫，所以我不能有一個固定的 position，因為數據可以隨時更改。 代碼如下所示——

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import { Chart } from "highcharts-vue";

export default {
  name: "CustomGuage",
  components: {
  highcharts: Chart
},
  props: ["data", "title", "name", "min", "max", "format", "text", "x", 
  "y","target"],
  data() {
    return {
      chartOptions: {
        chart: {
         type: "solidgauge",
         marginBottom: 190
      },

    title: {
      text: this.title,
      align: "left"
    },

    pane: {
      center: ["50%", "85%"],
      startAngle: -90,
      endAngle: 90,
      size: 200,
      background: {
        innerRadius: "60%",
        outerRadius: "100%",
        shape: "arc"
      }
    },

    // the value axis
    yAxis: {
      // plotBands: {
      //   from: 60,
      //   to: 61,
      //   zIndex: 10,
      //   color: "black",
      //   thickness: "45%",
      //   outerRadius: "105%",
      //   label: {
      //     text: this.text,
      //     align: "center",
      //      x: this.x,
      //      y: this.y
      //   }
      // },
      min: 0,
      max: 100,
      stops: [
        [0.1, "#DF5353"], // green
        [0.5, "#DDDF0D"], // yellow
        [0.9, "#55BF3B"] // red
      ],
      //  minColor: '#DF5353',
      //   maxColor: '#55BF3B',
      lineWidth: 0,
      tickWidth: 0,
      minorTickInterval: null,
      tickAmount: 2,
      title: {
        y: -70
      },
      labels: {
        y: 16
      }
    },

    credits: {
      enabled: false
    },
    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: -1,
          borderWidth: 0,
          useHTML: true
        }
      }
    },

    series: [
      {
        name: this.name,
        data: this.data,
        dataLabels: {
          format: this.format
        }
      },
      {
        data: this.target, // value at where the marker is rendered
        dataLabels: {
          enabled: false
        },
        tooltip: {
          enabled: false
        },
        type: "gauge",
        
        dial: {  // code that displays the marker
          baseLength: "100%",
          radius: "110%",
          rearLength: "-45%",
          
        },
      }
    ]
  }
 };
 },
watch: {
  data(newVal) {
    this.chartOptions.series[0].data = newVal;
   }
  }
 };

我想知道是否有辦法將 label 放在標記旁邊，根據數據庫中的數據自動顯示放置標記的位置，而無需手動放置 ZD304BA20E96D87411588EEABAC850E3 的 position

Answer 1

我認為您應該能夠通過設置與圖表高度相關的y屬性或將dataLabels.verticalAlign屬性設置為bottom來使數據 label position 居中。

演示： https://codesandbox.io/s/highcharts-vue-demo-8gwky?file=/src/components/Chart.vue

dataLabels: {
  //y: -80,
  verticalAlign: 'bottom',
  borderWidth: 0,
  useHTML: true,
  format: '<div style="text-align:center">' +
    '<span style="font-size:25px">{y}</span><br/>' +
    '<span style="font-size:12px;opacity:0.4">km/h</span>' +
    '</div>'
},

API： https://api.highcharts.com/highcharts/series.solidgauge.dataLabels.verticalAlign