谷歌图表周围的边框

我在谷歌图表实现中有一个小问题。按照要求，图表应该纲要（境）内封闭如下所示：谷歌图表周围的边框

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。 –

谷歌图表周围的边框

回答

相关问题