Google图表周围的边框

神秘魔术师ϡ

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

关于我需要添加哪些选项才能获得边框的任何想法?

用户1234

您可以通过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
        },
    }
};

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章