Highcharts車速表添加圖像背景

我想添加一個背景圖像到我的車速表使用Highcharts，但似乎我不能實現這一點。Highcharts車速表添加圖像背景

這是我的功能：

jQuery的（函數（）{

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漸變一樣嗎？感謝您的幫助！

來源

2014-10-27 Anonymous

你似乎是正確設置它，你有一個的jsfiddle？ – artm 2014-10-27 12:22:04

在窗格對象中將背景設置爲空。

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

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

來源

2014-10-27 13:31:06

問題是背景應該只在速度計內部，而不是整個容器的背景，因爲將背景精確置於需要保留在不同設備上的背景確實很困難。我需要爲內部速度計添加背景，而不是整個容器bg。謝謝 – Anonymous 2014-10-27 13:50:45

Highcharts車速表添加圖像背景

回答

相關問題