Highcharts Gauge錯位標簽

Question

我正在使用帶有十進制值的highcharts solid gauge。 這是jsfiddle http://jsfiddle.net/7hm1mkbn/

$('#container-temp').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 10.39,
        max: 23.83,
        title: {
            text: 'Speed'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Temperature',
        data: [23.23],
        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">C</span></div>'
        },
        tooltip: {
            valueSuffix: ' C'
        }
    }]

}));

最小 - 最大標簽放錯了位置。 有什么建議嗎？

Answer 1

如果你只是想最小值和最大值蜱（含標簽），您可以取代你tickPixelInterval用的靜態定義tickPositions 。 例如（ JSFiddle ）：

yAxis: {
    tickPositions: [10.39, 23.83]
}

如果您可能需要更多刻度（和標簽），您可能希望使用tickPositioner創建更加動態的函數。 例如（ JSFiddle ）：

yAxis: {
    tickPositioner: function () {
        var positions = [],
            numberOfTicks = 5;
            tick = this.min,
            increment = (this.max - this.min) / (numberOfTicks - 1);

        for (tick; tick - increment <= this.max; tick += increment) {
            positions.push(Math.round(tick * 100) / 100);
        }
        return positions;
    }
}