Question

我有一个标准的角度规，我无法弄清楚如何从数据标签中删除银色边框（笔划）。

使用以下代码，取自http://www.highcharts.com/demo/gauge-speedometer

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Speedometer'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 200,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 10,
            tickColor: '#666',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'km/h'
            },
            plotBands: [{
                from: 0,
                to: 120,
                color: '#55BF3B' // green
            }, {
                from: 120,
                to: 160,
                color: '#DDDF0D' // yellow
            }, {
                from: 160,
                to: 200,
                color: '#DF5353' // red
            }]
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' km/h'
            }
        }]

    },
    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
                var point = chart.series[0].points[0],
                    newVal,
                    inc = Math.round((Math.random() - 0.5) * 20);

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

                point.update(newVal);

            }, 3000);
        }
    });
});

我知道我可以在数据标签中设置文本样式，例如：

dataLabels: {
    format: '<span style="font-size:18px">Consumption: {y} kWh</span>',
     x: 0,
     y: 50
},

但我似乎找不到消除中风的方法。查看源代码，它在rect-tag中写为属性。

<rect x="0.5" y="0.5" width="95" height="27" fill="none" stroke="silver" stroke-width="1" rx="3" ry="3"></rect>

有没有办法使用Highcharts删除此笔画？任何帮助表示赞赏！

Answer 1

如果要从显示的dataLabel中删除边框，可以使用Highcharts API中的dataLabels.borderWidth参数： http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.borderWidth

  plotOptions: {
    series: {
      dataLabels: {
        borderWidth: 0
      }
    }
  },

在这里你可以看到一个如何工作的例子： http://jsfiddle.net/74eqcqso/1/

Highcharts Angular gauge - 如何删除数据标签笔划？

1 个答案: