如何隐藏highcharts实心仪表图的中间值？答案

【问题标题】：How to hide intermediate values of solid gauge chart of highcharts?如何隐藏highcharts实心仪表图的中间值？
【发布时间】：2014-07-21 13:37:29
【问题描述】：

我想删除出现在实心仪表图上的中间数字。例如我想从链接中给出的图表中隐藏 100。

Solid gauge chart

这是我的图表代码。

function myfun(data) {
var gaugeOptions = {
chart: {
  renderTo: 'mydiv',
  type: 'solidgauge'
},
title: null,
pane: {
  center: ['50%', '85%'],
  size: '140%',
  startAngle: -90,
  endAngle: 90,
  background: {
    backgroundColor: (window.Highcharts.theme && window.Highcharts.theme.background2) || '#EEE',
    innerRadius: '60%',
    outerRadius: '100%',
    shape: 'arc'
  }
},
tooltip: {
  enabled: false
},
// the value axis
yAxis: {
  stops: [
    [0.0, '#DF5353'], // red
    [0.5, '#DF5353'],
    [0.51, '#DDDF0D'],
    [0.79, '#DDDF0D'], // yellow
    [0.8, '#55BF3B'],
    [1, '#55BF3B'] // green
  ],
  lineWidth: 0,
  minTickInterval: 100,
  minorTickInterval: null,
  tickPixelInterval: 400,
  tickWidth: 0,
  title: {
    y: -110
  },
  labels: {
    y: 16
  }
},
plotOptions: {
  solidgauge: {
    dataLabels: {
      y: 5,
      borderWidth: 0,
      useHTML: true
    }
  }
}
};
// The speed gauge
$('#mydiv')
.highcharts(
  window.Highcharts
  .merge(
    gaugeOptions, {
      yAxis: {
        min: 0,
        max: 100,
        title: {
          text: ''
        }
      },
      credits: {
        enabled: false
      },
      series: [{
        name: 'Speed',
        data: [totalHealthScore],
        dataLabels: {
          format: '<div style="text-align:center"><span style="font-size:25px;color:' + ((window.Highcharts
              .theme && window.Highcharts.theme.contrastTextColor) || 'black') +
            '">{y}</span><br/>' + '<span style="font-size:12px;color:silver">Score</span></div>'
        },
        tooltip: {
          valueSuffix: ' Score'
        }
      }]
    }));
}

如何从链接中给出的图表中隐藏值 2.5 和 100？？

【问题讨论】：

标签： javascript jquery charts highcharts

【解决方案1】：

您可以使用 tickInterval 和 startOnTick 来影响刻度的位置，例如

yAxis: {
        tickInterval:200,
        startOnTick:true,

http://jsfiddle.net/DdAr6/

http://api.highcharts.com/highcharts#yAxis.tickInterval

【讨论】：

对于其他只需要开始 + 结束点的人，请将 tickPixelInterval 设置为 null 并将 tickInterval 设置为与您的最大值相同。 jsfiddle.net/f8NSe/3

【解决方案2】：

需要为y轴定义步数。

在速度计的代码中：

yAxis: {
    min: 0,
    max: 200,
    labels: {step:2},
    title: {
        text: 'Speed'
    }       
}

在转速表的代码中：

yAxis: {
    min: 0,
    max: 5,
    labels: {step:2},
    title: {
        text: 'RPM'
    }       
}

完整代码见http://jsfiddle.net/y62sj/。

【讨论】：

此解决方案还依赖于设置的 tickPixelInterval。
确实如此。只要他发布的原始代码没有超出我们的两个解决方案之一，OP 就不必担心设置它。可以在 jsfiddle.net/W6mRh/1 看到此代码的示例，其中包含在 tickPixelInterval 成员旁边定义的步骤（额外的好处是只需为所有图表设置一次）