web网页实现动态成生饼图、堆叠柱状图、折线图等

web网页实现动态成生饼图、堆叠柱状图、折线图等大数据可视化图表。

web网页版炒股数据可视化。


示例:

qoogle.cn_动态生成图饼分析测试

qoogle.cn_动态生成图饼分析测试


代码:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>qoogle.cn_动态生成图饼分析测试</title>
    <style>
        g.highcharts-grid:nth-child(6) > path {
            stroke-width: 0;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
    <script type="text/javascript">
            $(function () {
                $('#container_1').highcharts({
                chart: {
                    type: 'pie',
					backgroundColor:"#EEF3FA",
                    x:-200,
                    height: 250,
                    marginLeft:-150
                   
                },
                credits: {
                    enabled: false   //右下角不显示LOGO
                },
                title: {
                    text: 'qoogel.cn访客来源(虚构数据)',
                },
                subtitle: {
                    text: '小标题:qoogle测试',
                },
                exporting: {//Highcharts 图表导出功能模块。
                    enabled: false
                },
                colors: ['#E2214E', '#F7B52B', '#0749C3', '#66FE17',
                         '#24CBE5', '#4FB85A', '#FF9655', '#FFF263', '#6AF9C4'],
                legend: {
                    layout: 'vertical',
                    floating: true,
                    backgroundColor: '#EEF3FA',
                    align: 'right',
                    verticalAlign: 'top',
                    y: 35,
                    x: -20,
                    itemMarginBottom :5,//图例的上下间距
                    maxHeight: 200,
                    symbolHeight: 14,//高度
                    symbolWidth:14
                },
              
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: false
                        },
                        showInLegend: true,
                        symbolWidth: 24,
                        point: {
                            events: {
                                legendItemClick: function (e) {
                                    return false; // 直接 return false 即可禁用图例点击事件
                                }
                            }
                        }
                    }
                },
                 
                series: [{
                    data: [
                        ['直访'+'(qoogle.cn)' +'<br><span style="text-align:center;">50%</span>', 20.0],
                        ['百度'+'(baidu.com)'+'<br><span style="text-align:center;">50%</span>', 35.0],
                        ['360'+'(so.com)' +'<br><span style="text-align:center;">50%</span>', 15.0],
                        ['谷歌'+'(google.cn)'+'<br><span style="text-align:center;">50%</span>', 15.0],
                        ['搜狗'+'(sogou.com)' +'<br><span style="text-align:center;">50%</span>', 6.0],
                        ['Bing'+'(bing.com)'+'<br><span style="text-align:center;">50%</span>', 9.0],
                    ]
                }]
            });
        });
           
    </script>
    <script src="https://cdn.bootcss.com/highcharts/6.0.7/highcharts.js"></script>
</head>
<body>
    <div id="container_1" style="width:100%; margin: 0 auto;background-color:#EEF3FA"></div>
  
</body>
</html>


资源:

www.hcharts.cn



如果文章对您有帮助|有启发|有共鸣|有“爽了”,请随意打赏。您的支持是我的动力和价值的体现。

----------我不是街头卖艺者,但我渴望被打赏,博客要生存下去不容易。
----------我不是酒店服务生,但我渴望被打赏,博主也有妻儿子女一家子人。
----------我不是乞丐叫花子,但我渴望被打赏,渴望被打赏的价值认同感。
----------我不是建筑搬运工,但我渴望被打赏,我是蜜蜂我阅读/挑选/整合/转载/传播。
----------我不是作家或教授,但我渴望被打赏,咱中国人也能主动为知识/为受益而付费。

感谢土豪的打赏!


一码支持:微信/支付宝

打赏qoogle的二维码


分享,也是您对我的热力支持。谢谢!

内容版权声明:除转载分类下的文章来源网络(直转或整合而成),其它皆为本站原创文章。

转载注明出处:http://qoogle.cn/?id=62

发表评论(不用注册哟!)

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。