欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-11 09:45:50
...

关于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 : ' <b>{point.y:.2f}</b>'
//                },
                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: '近半年'
            }]
        };

       

 

实现效果图:


关于Highcharts你可能想知道的设置
            
    
    博客分类: Highcharts Highcharts 
 

 

  • 关于Highcharts你可能想知道的设置
            
    
    博客分类: Highcharts Highcharts 
  • 大小: 10.6 KB
相关标签: Highcharts