Question

我正在使用固体测量高图插件，它很完美，但是当我想显示工具提示并将其设置为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

有可能吗？

Answer 1

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

现在，关于格式化工具提示，请阅读docs。我可以复制并粘贴到这里教程，但我认为没有必要。

无论如何，API参考：

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

如何在高图中自定义实心规格中的工具提示

1 个答案: