标签Y轴停在Highcharts实心仪表中

Question

我有一个如下所示的坚固指标：https://jsfiddle.net/fb5Ltxbt/

这是我迄今为止所取得的要求：

• 量程范围0到50
• 如果值＆lt; 40，显示为红色，否则显示为绿色
• 显示主要滴答

如果可能的话，这就是我要添加的内容：

• 指示Y轴停止的代码
中定义的内容

换句话说，我想要的是添加如下图所示的“250”指示符：

它不一定是一个额外的数字，只是标记每一站的东西。

JSFiddle源代码如下：

var gaugeOptions = {
  chart: {
    type: 'solidgauge',
    backgroundColor: null
  },
  title: null,
  pane: {
    center: ['35%', '75%'],
    size: '100%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: 'white',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  tooltip: {
    enabled: false
  },
  // the value axis
  yAxis: {
    // Add something to indicate each of these stops
    stops: [
      [0.8, 'red'],
      [1.0, 'green']
    ],
    lineWidth: 0,
    tickInterval: 10, // Keep the labels for these ticks
    minorTickInterval: 2.5,
    title: null,
    labels: {
      y: -5,
      style: {
        'color': 'black',
        'fontWeight': 'bold'
      }
    }
  }
};

var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 50,
    title: null
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'ABC',
    data: [30],
    dataLabels: {
      formatter: function() {
        return this.point.y;
      },
      y: -20,
      style: {
        textShadow: false,
        'color': 'black',
        'fontSize': '2em'
      },
      borderWidth: 0
    },
    tooltip: {
      valueSuffix: ' km/h'
    }
  }]
}));

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div style="width: 1024px; height: 768px; margin: 0;">
  <div id="chartContainer"></div>
</div>

我看过how to make specific labels outside gauge chart，但它需要删除所有正常的刻度。如果可能的话，我不希望将它们删除，但如果我想要的话也不能这样说，谢谢！

Answer 1

您可以额外使用yAxis来获得额外的刻度。附加轴应为主轴linked。然后，它具有与主轴相同的比例，并且您可以控制其他独立的刻度 - 您可以通过tickPositions定义特定的刻度。

{
  linkedTo: 0,
  lineWidth: 0,
  minorTickLength: 0,
  tickPositions: [35],
  tickLength: 75,
  labels: {
    x: 30,
    y: -30,
    style: {
      fontSize: '25px'
    }
  }
}]

实例和输出

https://jsfiddle.net/ym2tvzy7/

如果您想要具有不同颜色和样式的刻度线，可以添加更多轴。

https://jsfiddle.net/ym2tvzy7/1/

Answer 2

如果我理解你的要求 可能这不会完全符合您的要求作为替代

您也可以尝试： -

plotBands: [{
      from: 39.5,
      to: 40.5,
      color: '#55BF3B' // green
}]

var gaugeOptions = {
  chart: {
    type: 'solidgauge',
    backgroundColor: null
  },
  title: null,
  pane: {
    center: ['35%', '75%'],
    size: '100%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: 'white',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  tooltip: {
    enabled: false
  },
  // the value axis
  yAxis: {
    stops: [
      [0.8, 'red'],
      [1.0, 'green']
    ],
    lineWidth: 0,
    tickInterval: 10,
    minorTickInterval: 2.5,
    title: null,
    labels: {
      y: -5,
      style: {
        'color': 'black',
        'fontWeight': 'bold'
      }
    }
  }
};

var chart = Highcharts.chart('chartContainer', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 50,
    title: null,
    plotBands: [{
      from: 0,
      to: 40,
      color: '#55BF3B' // green
    }]
  },
  credits: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
  series: [{
    name: 'ABC',
    data: [31],
    dataLabels: {
      formatter: function() {
        return this.point.y;
      },
      y: -20,
      style: {
        textShadow: false,
        'color': 'black',
        'fontSize': '2em'
      },
      borderWidth: 0
    },
    tooltip: {
      valueSuffix: ' km/h'
    }
  }]
}));

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div style="width: 1024px; height: 768px; margin: 0;">
  <div id="chartContainer"></div>
</div>