关于Highcharts你可能想知道的设置

阅读更多

关于Highcharts你可能想知道的设置

      最近有接触到Highcharts，为了实现想要的效果查阅了不少资料。下面举个栗子，该栗子中可设置图表显示大小、标签位置、设置数据标签的背景透明度、标签边框大小、标签大小、标签字体大小、标签透明的、显示隐藏、标签数值格式化、颜色等。下面放上代码：

 var chart2 = {
            tooltip: {
                borderColor: '#000000'
            },
            chart: {
                type: 'column',
                animation: false,
                height: 250,          //控制图大小
                width:280,
                backgroundColor: 'rgba(0,0,0,0)'
            },
            title: {
                text: null
            },
            subtitle: {
                text: '单位：MB',
                align: 'right',
                floating: true,
                verticalAlign: "top",    //控制位置
                x: 0
            },
            xAxis: {

            },
            yAxis: {
                title: {
                    text: null
                },
                visible: false,
            },
            plotOptions: {
                column: {
                    dataLabels: {
                        enabled: true, // 开启数据标签
                        color: "333333",
                        crop: false
                    },
                    pointWidth: 10,
                    enableMouseTracking: false // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                },
//                tooltip : {
//                    pointFormat : ' {point.y:.2f}'
//                },
                series: {
                    events: {
                        legendItemClick: function(mmm) {
                            for (var i = 0; i < chart2.series.length; i++) {
                                chart2.series[i].hide();
                            }
                            var visibility = this.visible ? 'visible' : 'hidden';
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        verticalAlign: "middle",
                        align: "center",
                        borderRadius: 0,
                        backgroundColor: 'rgba(0, 0, 0, 0)',  //设置标签背景透明
                        borderWidth: 0,  //标签边框大小
                        color: "#666",
                        borderColor: '#5799d4',
                        y: -25,
                        borderHeight: 0,
                        shadow: false,
                        format : '{point.y:.2f}',   //保留小数点后两位，实现小数点后的0也显示
                        style: {
                            weight:'10px',          //标签框大小
                            height:'4px',
                            left:0,
                            padding:0,
                            visibility:'visible',   //可见
                            opacity:'1',            //透明度
                            fontWeight:'8px',       //标签字体大小
                            fontHeight:'4px',
                            fontSize: '3px'

                        }
                    }
                }
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '近半年'
            }]
        };

       

 

实现效果图：

 

 

• 
• 大小: 10.6 KB

• 查看图片附件