谷歌圖表周圍的邊框

我在谷歌圖表實現中有一個小問題。按照要求，圖表應該綱要（境）內封閉如下所示：谷歌圖表周圍的邊框

enter image description here

但我得到以下的輸出：

enter image description here

這裏是我使用的選項爲圖表：

gChartOptions = { 
chartType:"ComboChart", 
    containerId:"visualization", 
    stackSeries: true, 
    isStacked : true, 
    pointSize: 3, 
    backgroundColor: '#000', 
    legend: 'none', 
    tooltip:{ 
     trigger:'none' 
    }, 
    colors : ['#6DB1E2','#FDCB34','#69BD44','#ffffff','#A2469B','#ffffff'], 
    seriesDefaults: { 
     rendererOptions: { 
      barPadding: 0, 
      barMargin: 10 
     }, 
     pointLabels: { 
      show: true, 
      stackedValue: true 
     } 
    }, 
    vAxis: { 
     gridlines: { 
      color: 'transparent' 
     } 
    }, 
    seriesType: "bars", 
    series: { 
     0: { 
      targetAxisIndex: 0 
     }, 
     1: { 
      targetAxisIndex: 0 
     }, 
     2: { 
      targetAxisIndex: 1, 
      type: "line" 
     }, 
     3: { 
      targetAxisIndex: 1, 
      lineWidth: 0, 
      pointSize: 3, 
      type: "line" 
     }, 
     4: { 
      targetAxisIndex: 1, 
      type: "line" 
     }, 
     5: { 
      targetAxisIndex: 1, 
      lineWidth: 0, 
      pointSize: 3, 
      type: "line" 
     } 
    }, 
    hAxis: { 
     //ticks:ideasChart.xAxis, 
     tickOptions: {        
      fontSize: setChartLabelFontSize, 
      fontWeight: 'bold',        
      color: '#ffffff' 
     }, 
     title:'Occupancy Date', 
     titleTextStyle: 
     { 
      fontStyle: "normal", 
      italic: false, 
      fontSize : setChartLabelFontSize, 
      color: '#ffffff' 
     }, 
     textStyle: 
     { 
      fontStyle: "normal", 
      italic: false, 
      fontSize : 8, 
      color: '#ffffff' 
     }, 
    },  
    vAxes: { 
     0: {   
      title: "Solds", 
      textStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      titleTextStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      label:'Solds',  
      type:'bars', 
      minValue: 0 
     }, 
     1: { 
      title: "Solds", 
      textStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      titleTextStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      label:'Solds', 
      type:'bars', 
      minValue: 0 
     }, 
    } 
};

任何想法，我需要添加選項，以獲得邊界aro和它？

來源

2013-10-10 MysticMagicϡ

您可以通過chartArea對象訪問圖表的內部部分。所以要加你需要像一個邊界：

chartArea: { 
    backgroundColor: { 
     stroke: '#fff', 
     strokeWidth: 1 
    } 
}

在您的例子，這將是：

gChartOptions = { 
chartType:"ComboChart", 
    containerId:"visualization", 
    stackSeries: true, 
    isStacked : true, 
    pointSize: 3, 
    backgroundColor: '#000', 
    legend: 'none', 
    tooltip:{ 
     trigger:'none' 
    }, 
    colors : ['#6DB1E2','#FDCB34','#69BD44','#ffffff','#A2469B','#ffffff'], 

    chartArea: { 
     backgroundColor: { 
      stroke: '#fff', 
      strokeWidth: 1 
     } 
    }, 

    seriesDefaults: { 
     rendererOptions: { 
      barPadding: 0, 
      barMargin: 10 
     }, 
     pointLabels: { 
      show: true, 
      stackedValue: true 
     } 
    }, 
    vAxis: { 
     gridlines: { 
      color: 'transparent' 
     } 
    }, 
    seriesType: "bars", 
    series: { 
     0: { 
      targetAxisIndex: 0 
     }, 
     1: { 
      targetAxisIndex: 0 
     }, 
     2: { 
      targetAxisIndex: 1, 
      type: "line" 
     }, 
     3: { 
      targetAxisIndex: 1, 
      lineWidth: 0, 
      pointSize: 3, 
      type: "line" 
     }, 
     4: { 
      targetAxisIndex: 1, 
      type: "line" 
     }, 
     5: { 
      targetAxisIndex: 1, 
      lineWidth: 0, 
      pointSize: 3, 
      type: "line" 
     } 
    }, 
    hAxis: { 
     //ticks:ideasChart.xAxis, 
     tickOptions: {        
      fontSize: setChartLabelFontSize, 
      fontWeight: 'bold',        
      color: '#ffffff' 
     }, 
     title:'Occupancy Date', 
     titleTextStyle: 
     { 
      fontStyle: "normal", 
      italic: false, 
      fontSize : setChartLabelFontSize, 
      color: '#ffffff' 
     }, 
     textStyle: 
     { 
      fontStyle: "normal", 
      italic: false, 
      fontSize : 8, 
      color: '#ffffff' 
     }, 
    },  
    vAxes: { 
     0: {   
      title: "Solds", 
      textStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      titleTextStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      label:'Solds',  
      type:'bars', 
      minValue: 0 
     }, 
     1: { 
      title: "Solds", 
      textStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      titleTextStyle: 
      { 
       fontStyle: "normal", 
       italic: false, 
       fontSize : setChartLabelFontSize, 
       color: '#ffffff' 
      }, 
      label:'Solds', 
      type:'bars', 
      minValue: 0 
     }, 
    } 
};

來源

2013-10-10 14:18:00 user1234

它沒有在工作第一嘗試..是這樣記載，覈實或只是猜測？ – necromancer

爲我完美工作。我看到了這個選項，但並不認爲這對我有幫助。謝謝。 +1。 –

谷歌圖表周圍的邊框

回答

相關問題