如何在高图中自定义工具提示

我正在使用solid Gauchart插图，它非常完美，但是当我想显示工具提示并将其设置为true时，它看起来不太好。我只是想在计不是别的什么这里显示的值是代码：如何在高图中自定义工具提示

$(function() { 

var gaugeOptions = { 

    chart: { 
     type: 'solidgauge' 
    }, 

    title: null, 

    pane: { 
     center: ['50%', '85%'], 
     size: '140%', 
     startAngle: -90, 
     endAngle: 90, 
     background: { 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE', 
      innerRadius: '60%', 
      outerRadius: '100%', 
      shape: 'arc' 
     } 
    }, 

    tooltip: { 
     enabled: true 
    }, 

    // the value axis 
    yAxis: { 
     stops: [ 
      [0.1, '#55BF3B'], // green 
      [0.5, '#DDDF0D'], // yellow 
      [0.9, '#DF5353'] // red 
     ], 
     lineWidth: 0, 
     minorTickInterval: null, 
     tickPixelInterval: 400, 
     tickWidth: 0, 
     title: { 
      y: -70 
     }, 
     labels: { 
      y: 16 
     }   
    }, 

    plotOptions: { 
     solidgauge: { 
      dataLabels: { 
       y: 5, 
       borderWidth: 0, 
       useHTML: true 
      } 
     } 
    } 
}; 

// The speed gauge 
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, { 
    yAxis: { 
     min: 0, 
     max: 200, 
     title: { 
      text: 'Speed' 
     }  
    }, 

    credits: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Speed', 
     data: [80], 
     dataLabels: { 
      format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
       ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + 
       '<span style="font-size:12px;color:silver">km/h</span></div>' 
     }, 
     tooltip: { 
      valueSuffix: ' km/h' 
     } 
    }] 

})); 

// The RPM gauge 
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, { 
    yAxis: { 
     min: 0, 
     max: 5, 
     title: { 
      text: 'RPM' 
     }  
    }, 

    series: [{ 
     name: 'RPM', 
     data: [1], 
     dataLabels: { 
      format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
       ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' + 
       '<span style="font-size:12px;color:silver">* 1000/min</span></div>' 
     }, 
     tooltip: { 
      valueSuffix: ' revolutions/min' 
     }  
    }] 

})); 

// Bring life to the dials 
setInterval(function() { 
    // Speed 
    var chart = $('#container-speed').highcharts(); 
    if (chart) { 
     var point = chart.series[0].points[0], 
      newVal, 
      inc = Math.round((Math.random() - 0.5) * 100); 

     newVal = point.y + inc; 
     if (newVal < 0 || newVal > 200) { 
      newVal = point.y - inc; 
     } 

     point.update(newVal); 
    } 

    // RPM 
    chart = $('#container-rpm').highcharts(); 
    if (chart) { 
     var point = chart.series[0].points[0], 
      newVal, 
      inc = Math.random() - 0.5; 

     newVal = point.y + inc; 
     if (newVal < 0 || newVal > 5) { 
      newVal = point.y - inc; 
     } 

     point.update(newVal); 
    } 
}, 2000);

}）;

这里是小提琴链接：

fiddle

是否有可能做到这一点？

来源

2014-07-08 Hamed Minaee

你是什么意思？您希望该工具提示的外观如何？ –

您可以使用[tooltip格式化程序]（http://api.highcharts.com/highcharts#tooltip.formatter）或[pointValue]（http://api.highcharts.com/highcharts#tooltip.pointFormat）自定义内容你的工具提示。 –

它看起来不太好，因为你已经为数据标签设置了useHTML: true。 HTML标签总是在图表上显示（也是工具提示），因为不是SVG标签。简单的解决方案是禁用该选项，请参阅：http://jsfiddle.net/tA3GR/2/

现在，关于格式化工具提示，请阅读docs。我可以在这里复制&粘贴教程，但我认为这不是必需的。

反正API参考：

（使用上述解决方案之一来格式化工具提示你需要的方式来）

来源

2014-07-09 10:08:22

如何在高图中自定义工具提示

回答

相关问题