问题
I am having a little issue in google chart implementation. As per requirement, the chart should be enclosed within outline (border) as shown here:
But I am getting following output:
Here is the options I am using for chart:
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
},
}
};
Any idea about what I need to add in options in order to get border around it?
回答1:
You can access the inner part of the chart through the chartArea object. So to add a border you would need something like:
chartArea: {
backgroundColor: {
stroke: '#fff',
strokeWidth: 1
}
}
In your example this would be:
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
},
}
};
来源：https://stackoverflow.com/questions/19296400/border-around-google-chart