Граница вокруг диаграммы Google

Question

У меня возникла небольшая проблема в реализации графика Google. В соответствии с требованием, график должен быть заключен в пределах контура (границы), как показано здесь:

Но я получаю следующий результат:

Вот варианты, которые я использую для диаграммы:

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 не так ли?

Answer 1

Вы можете получить доступ ко внутренней части диаграммы через объект 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 
     }, 
    } 
};