對於多個圖表，Highcharts backgroundColor只適用於一個圖表

以下示例位於jsfiddle中，並帶有以下鏈接。 http://jsfiddle.net/KWqU2/2/對於多個圖表，Highcharts backgroundColor只適用於一個圖表

兩個Highcharts都在圖表選項配置中設置了backgroundColor。

問題似乎是，無論我設置backgroundColor屬性爲何，第二個圖表默認爲默認值，並且忽略我指定的任何設置。我的目標是讓圖表背景都透明。我曾嘗試過backgroundColor：null，backgroundColor：'透明'，backgroundColor：'rgba（255,255,255,0.1）'似乎沒有任何工作。

任何想法，將不勝感激。

下面是兩個圖表代碼：

var chart; 

// Radialize the colors 
     Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
      return { 
       radialGradient: { cx: 0.4, cy: 0.2, r: 0.7 
           }, 
       stops: [ 
        [0, color], 
        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken 
       ] 
      }; 
     }); 
$('#container').highcharts({ 
     chart: { 
       backgroundColor:'#000000', 
       size:'100%' 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       size: 200, 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 

      } 
     }, 
     credits:{enabled:false}, 
     exporting:{enabled:false}, 
     colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'], 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Supports You', 3], 
       ['Opposes You',  1], 
       ['Absent on Supporting', 0], 
       ['Absent on Opposing', 0] 
      ] 
     }] 
    }); 

    var chart2; 

// Radialize the colors 
     Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
      return { 
       radialGradient: { cx: 0.4, cy: 0.2, r: 0.7 
           }, 
       stops: [ 
        [0, color], 
        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken 
       ] 
      }; 
     }); 
     $('#container2').highcharts({ 
     chart2: { 
       backgroundColor:'Transparent', 
       size:'100%' 
     }, 
     legend:{ 
      enabled: false 
     }, 
     title: { 
      text: 'Browser market shares at a specific website, 2010' 
     }, 
     tooltip: { 
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: true, 
       cursor: 'pointer', 
       size: 200, 
       dataLabels: { 
        enabled: true, 
        color: '#000000', 
        connectorColor: '#000000', 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %' 
       } 

      } 
     }, 
     credits:{enabled:false}, 
     exporting:{enabled:false}, 
     colors:['#ADD46D','#F1744F','#b9e376','#f2a48d'], 
     series: [{ 
      type: 'pie', 
      name: 'Browser share', 
      data: [ 
       ['Supports You', 3], 
       ['Opposes You',  10], 
       ['Absent on Supporting', 0], 
       ['Absent on Opposing', 0] 
      ] 
     }] 
    });

來源

2013-10-05 user2355051

你做錯了，chart2是不是一種選擇。更改此：

$('#container2').highcharts({ 
    chart2: { 
     backgroundColor:'Transparent', 
     size:'100%' 
    }, 
    ... 
});

要這樣：

$('#container2').highcharts({ 
    chart: { 
     backgroundColor:'Transparent', 
     size:'100%' 
    }, 
    ... 
});

見updated jsFiddle

來源

2013-10-05 14:14:52 Brewal

謝謝，這做到了。 – user2355051

對於多個圖表，Highcharts backgroundColor只適用於一個圖表

回答

相關問題