谷歌图表周围的边框

Question

我在谷歌图表实施中遇到了一些问题。根据要求，图表应包含在轮廓（边框）内，如下所示：

但我得到以下输出：

以下是我用于图表的选项：

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
        },
    }
};

有关我需要在选项中添加什么才能获得边界的任何想法？

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
        },
    }
};