`
菜鸟级JAVA
  • 浏览: 96722 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

Highcharts 圆饼图demo

阅读更多



<div id="container" style="width: 600px; height: 550px; margin: 0 auto"></div>
<script language="JavaScript">
    var beginTime = "2016年12月06日 16:54";
    var endTime = "2017年01月06日 16:54";
    $(document).ready(function() {
        var chart = {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        };
        var title = {
            text: beginTime+' ~  '+endTime
        };
        //鼠标显示
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.y}</b><br/>总调用次数:{point.total}'
        };
        //饼图外显示
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f}%'
                },
                showInLegend: true
            }
        };
        var series= [{
            type: 'pie',
            name: '调用次数',
            data: [
                {
                    name: "逾期平台查询",
                    y: 100
                },
                {
                    name: "人脸比对",
                    y: 20
                },
                {
                    name: "银行帐号认证",
                    y: 300
                },
                {
                    name: "法院公告详情",
                    y: 4
                },
                {
                    name: "名片识别",
                    y: 50
                },
                {
                    name: "营业执照识别",
                    y: 6
                }
            ]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.series = series;
        json.plotOptions = plotOptions;
        $('#container').highcharts(json);
    });
</script>
  • 大小: 171.4 KB
分享到:
评论

相关推荐

    AspNet的Highcharts中文翻译Demo

    `标签`中的"示例"表明,这个Demo包含了一些实际的代码片段和运行实例,这些例子覆盖了Highcharts的基本用法以及一些高级特性,如折线图、柱状图、饼图、散点图、地图等。通过这些示例,开发者可以快速上手,并了解到...

    HighCharts插件及Demo

    HighCharts是一款广泛应用于Web开发中的数据可视化插件,它提供了丰富的图表类型,如饼状图、柱状图、折线图等,使得开发者能够轻松地将复杂的数据转化为直观易懂的图表,提升用户对数据的理解和体验。在本文中,...

    HighCharts一些demo和API

    这个压缩包包含了关于HighCharts的一些关键资源,包括API文档、示例Demo和属性截图,对于理解和应用HighCharts非常有帮助。 首先,让我们详细了解一下HighCharts的API。API(Application Programming Interface)是...

    highcharts小demo

    highcharts小demo

    Highcharts json demo

    总结起来,"Highcharts json demo"项目展示了如何利用Highcharts与JSON数据结合,实现异步请求和数据可视化。这个过程涉及到前端的AJAX请求、JSON数据解析以及Highcharts的配置与渲染。掌握这些技术,不仅有助于提升...

    Highcharts柱状图显示

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括柱状图、折线图、饼图等多种类型。在本案例中,我们聚焦于"Highcharts柱状图显示",特别是柱状图...

    highcharts 中文API及DEMO

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,如折线图、柱状图、饼图、散点图等。这个压缩包"highcharts 中文API及DEMO"可能包含了Highcharts的中文...

    highcharts 4.1.9 附DEMO(不是直接填值,新手需要)

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它允许开发者创建出各种动态、交互式的柱状图、折线图、饼图、散点图等多种类型的图表。在4.1.9版本中,Highcharts提供了丰富的功能和优化,适用于数据可视...

    highcharts简单的饼图demo

    Highcharts是一款强大的JavaScript图表库,用于在Web上创建各种数据可视化图表,如柱状图、折线图、饼图等。在这个"highcharts简单的饼图demo"中,我们将深入探讨如何利用Highcharts来构建一个基本的饼图,并根据...

    highCharts 展示图片示例

    highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要的朋友看看 另外 怎么用highcharts 和 fusioncharts 画 雷达图 ,仪表图 ,会的 朋友 ...

    highcharts+struts2的demo

    Highcharts是一个基于纯JavaScript的图表库,支持多种图表类型,如柱状图、折线图、饼图、散点图等。它的优点包括响应式设计、良好的性能、丰富的API和易于定制。Highcharts通过简单的JSON配置对象就能生成复杂的...

    highcharts demo

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的互动图表,如折线图、柱状图、饼图、散点图等。在“highcharts demo”这个项目中,我们看到它主要用于以时间作为X轴展示数据变化,这是一种...

    Highcharts实现图形报表

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者轻松地在网页上创建出各种高质量的数据可视化图形,如柱状图、线图、饼图、散点图等。在本项目中,“Highcharts实现图形报表”旨在利用Highcharts的功能,...

    highcharts实现雷达图效果

    Highcharts是一款强大的JavaScript图表库,它能够帮助开发者创建各种类型的图表,包括柱状图、折线图、饼图以及我们关注的雷达图等。在Web应用中,雷达图常用于展示多维数据,每个轴代表一个特性或指标,数据点则...

    unigui_highcharts_Demo

    Highcharts则是一个强大的图表库,它支持各种类型的图表,如折线图、柱状图、饼图、散点图等,可以用于展示复杂的数据。Highcharts提供了丰富的API和配置选项,使得开发者可以定制化图表的样式、颜色、交互行为等。...

    前端用Highcharts 写 venn图 鼠标悬浮效果以及点击事件

    在前端开发中,数据可视化是不可或缺的一部分,Highcharts是一个强大的JavaScript图表库,它提供了丰富的图表类型,包括柱状图、折线图、饼图以及我们这里关注的Venn图(韦恩图)。Venn图是一种特殊的图表,常用于...

    highcharts曲线图,饼状图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括曲线图和饼状图。这个库以其简洁的API、强大的自定义能力和跨浏览器兼容性而受到欢迎。在本文中,...

    highcharts表格制作柱状图的Demo

    在这个"highcharts表格制作柱状图的Demo"中,我们将深入探讨如何使用Highcharts来构建一个柱状图。 首先,我们需要在HTML文件中引入Highcharts的相关库。这通常包括`highcharts.js`和可能的模块,如`exporting.js`...

    柱状图、折线图、饼图、蜘蛛图完整demo

    这个压缩包包含的“柱状图、折线图、饼图、蜘蛛图完整demo”是Highcharts的具体应用示例,帮助开发者理解和学习如何使用该库。 首先,我们来看柱状图(Bar Chart)。柱状图是一种常用的数据可视化工具,用于比较...

Global site tag (gtag.js) - Google Analytics