`
Sunflower-13
  • 浏览: 73981 次
  • 性别: Icon_minigender_2
  • 来自: 长沙
社区版块
存档分类
最新评论

关于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 : ' <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: '近半年'
            }]
        };

       

 

实现效果图:



 

 

  • 大小: 10.6 KB
0
0
分享到:
评论

相关推荐

    AspNet的Highcharts中文翻译Demo

    3. 配置图表:使用JavaScript创建Highcharts对象并设置配置选项,如类型、标题、数据源等。 4. 渲染图表:调用`Highcharts.chart()`方法,传入图表容器和配置对象,完成图表渲染。 在中文版Demo中,开发者可以学习...

    HighCharts网站+chm的文档+例子

    在CHM文件中,你可以找到关于HighCharts的各种选项、方法、事件以及示例,这对于初学者来说是极好的参考资料,可以快速掌握如何配置和定制图表。 `Highcharts-3.0.10.zip`是HighCharts的一个旧版本,3.0.10。这个...

    Highcharts-export-module-asp.net-master

    7. **部署和配置**: 在实际环境中,你需要知道如何将这个模块部署到IIS服务器,并配置相应的权限和设置,确保导出服务正常运行。 8. **安全性考虑**: 由于涉及到用户数据的传输,必须关注安全问题,如防止跨站脚本...

    charts替换文件

    如果你使用的是虚拟环境(如`venv`或`conda`),那么它们可能位于环境的`site-packages`目录下的`hcharts`或`highcharts`文件夹内。 替换过程通常包括以下步骤: 1. 备份:在替换前,先备份原有的相关文件,...

    android 开发链接

    开发者需要知道如何设置`WebViewClient`和`WebChromeClient`,以及如何启用JavaScript支持,处理重定向和加载进度。 再者,Android应用还经常通过Intent机制与其他应用进行链接。例如,可以定义特定的scheme和host...

    JS动态图例代码

    "狐帝网调试说明.txt"可能是一份关于如何调试JS代码的指南。调试是开发过程中不可或缺的部分,它帮助找出并修复代码中的错误。通常,开发者会使用浏览器的开发者工具进行JS调试,查看和修改变量值,设置断点,以及...

    《精通Java Web动态图表编程》

    你需要知道如何使图表在不同屏幕尺寸下都能正常显示。 10. **性能优化**:大量数据时,性能优化是必须考虑的问题。了解如何通过缓存、分页和延迟加载来提升图表的加载速度和整体性能。 11. **图表API**:理解和...

    JS柱形统计表

    7. **动态更新**:为了响应后端数据的变化,你需要设置监听器或者事件处理函数,当数据更新时,可以重新渲染图表,保持其与最新数据同步。 8. **样式定制**:柱形图的外观可以通过调整颜色、宽度、标签等属性进行...

    生成报表图

    在本案例中,PHP代码片段应该是从CI框架中提取出来的,因此可能需要在相应的CI项目中设置好路由、模型、控制器和视图才能正常工作。 5. **图表生成库**:尽管Flash可以创建图表,但考虑到现代浏览器对Flash的支持...

    dashboard chart view的修改

    如果你正在使用React、Vue或Angular等现代前端框架,那么"dist"中的代码可能经过了编译和打包,结构可能包括静态HTML文件、minified CSS和JS文件。修改chart view时,你需要找到对应的组件文件,修改源代码,然后...

    JS绘制曲线图源码

    对于数据可视化,JavaScript库如D3.js、Chart.js、Highcharts等提供了强大的支持,使得开发者能够轻松地创建各种图表,包括曲线图。 1. **HTML基础**:在`view.html`文件中,通常会包含HTML结构,它是网页的基础。...

    基于 JAVA 实现的爬虫系统+可视化报表毕业设计

    此外,还可能涉及多线程爬取、代理设置、验证码识别和反爬策略,这些都能提升爬虫的效率和实用性。 3. **数据存储与处理**:爬取的数据通常需要存储,可以使用MySQL、MongoDB等数据库进行持久化。学习者应理解SQL...

    安卓饼状图

    常见的JavaScript库如Highcharts、Chart.js、D3.js等都支持饼状图的绘制。假设我们选择了轻量级且易用的Chart.js,首先需要在HTML中引入Chart.js库的CDN链接,然后创建一个canvas元素作为画布。在JavaScript中,我们...

Global site tag (gtag.js) - Google Analytics