Question

我正在尝试为使用Highcharts制作的车速表添加背景图像，但似乎无法达到此目的。

这是我的功能：

jQuery（function（）{

jQuery('#speedometer').highcharts({
    chart: {
        type: 'gauge',
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        height: 200,
        plotBackgroundColor: null,
        plotBackgroundImage: 'http://www.psdgraphics.com/file/colorful-triangles-background.jpg',
        plotBorderWidth: 0,
        plotShadow: false
    },
    title: {
        text: 'NUMERO DI TWEET'
    },
    exporting: {enabled: false},
    credits: {
        enabled: false
    },
    pane: {
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '98%'],
        size: 250,
        background: [{
                backgroundColor: 'rgba(255, 255, 255, 0.1)',
                borderWidth: 0,
                outerRadius: '0%',
                innerRadius: '100%'
            }]
    },
    plotOptions: {
        gauge: {
            dataLabels: {
                enabled: false
            },
            dial: {
                radius: '90%',
                backgroundColor: '#FFF',
                topWidth: 1,
                baseWidth: 8,
                rearLength: '-4%'
            },
            pivot: {
                radius: 7,
                borderWidth: 7,
                borderColor: 'white',
                backgroundColor: 'transparent'
            }
        }
    },
    // the value axis
    yAxis: {
        min: 0,
        max: 100,
        minorTickInterval: 'auto',
        minorTickWidth: 0,
        minorTickLength: 0,
        minorTickPosition: 'outside',
        minorTickColor: '#767775',
        tickPixelInterval: 80,
        tickWidth: 1,
        tickPosition: 'outside',
        tickLength: 10,
        tickColor: '#767775',
        labels: {
            step: 1,
            rotation: 'auto',
            distance: 10
        },
    },
    series: [{
            name: 'Numero di Tweet',
            data: [80],
            color: '#fff',
        }]

},
// 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);
    }
});

}）;

下图显示了我想要实现的目标

enter image description here

有没有办法添加像这样的backrgound图像或使用CSS3渐变做同样的事情？谢谢你的帮助！

Answer 1

在窗格对象中将背景设置为null。

pane: {
        startAngle: -90,
        endAngle: 90,
        center: ['50%', '98%'],
        size: 250,
        background: null
    },

示例：http://jsfiddle.net/j9k4cb2j/

Highcharts车速表增加图象背景

1 个答案: