highcharts 柱状图动态设置数据应用实例

<div id="container" style="min-width:700px;height:400px"></div>
#javascript#

$("#container").highcharts({
            chart: {
                type: ‘column‘
            },
            credits: {//去掉 highcharts.com
                enabled:false
            },
            colors: [‘#7cb5ec‘,‘#434348‘, ‘#90ed7d‘, ‘#f7a35c‘, ‘#8085e9‘,‘#f15c80‘, ‘#e4d354‘, ‘#8085e8‘, ‘#8d4653‘, ‘#91e8e1‘],
            title: {
                text: ‘平台品牌数据‘,
                style:{
                    color:‘#8085e8‘
                }
            },
            subtitle: {
                text: ‘电子商务公司‘
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                min: 0,
                title: {
                    text: ‘Rainfall (个)‘
                }
            },
            tooltip: {
                headerFormat: ‘<span style="font-size:10px">{point.key}</span><table>‘,
                pointFormat: ‘<tr><td style="color:{series.color};padding:0">{series.name}: </td>‘ +
                ‘<td style="padding:0"><b>{point.y:.1f} 个</b></td></tr>‘,
                footerFormat: ‘</table>‘,
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: []
        });

        // 动态获取数据并设置
        $.ajax({
            type: ‘get‘,
            url: ‘<?php echo site_url()?>/analysesdata/Brandarea/test‘,
            data: ‘‘,
            dataType: ‘json‘,
            success: function (data) {

                var brand = new Array();
                brand = ("招商,善融,建行,工商,民生,淘宝,邮乐,一卡通").split(‘,‘);
                console.info(brand);

                //设置统计数据
                var brand_chart = $("#container").highcharts();

                //设置x轴数据
                brand_chart.xAxis[0].setCategories([‘苹果‘, ‘三星‘, ‘小米‘, ‘华为‘, ‘魅族‘]);

                //设置柱状图数据
                var i=0;
                $.each(brand,function (key, val) {

                    //设置 X 数据
                    brand_chart.addSeries({name:val,data:eval("([" + data[val] + "])")});
                    //alert(brand_chart.series[i].name);
                    //brand_chart.series[i].setData(eval("([" + data[val] + "])"));

                    i++;
                });

              // brand_chart.series[i].setData(eval("([" + data[‘招商‘] + "])"));
              //brand_chart.series[0].setData(eval("([60, 71.15, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4])"));

            }

        });
静态设置series数据 :X轴
 series: [    {
                name: ‘招商‘,
                data: [],
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: ‘#90ed7d‘,
                    align: ‘top‘,
                    x: 4,
                    y: -10,
                    style: {
                        fontSize: ‘10px‘,
                        fontFamily: ‘Verdana, sans-serif‘,
                        textShadow: ‘0 0 0px black‘
                    }
                }

            }, {
                name: ‘善融‘,
                data: [83.6, 78.8, 98.5, 93.4, 106.0]

            }, {
                name: ‘建行‘,
                data: [48.9, 38.8, 39.3, 41.4, 47.0]
            }, {
                name: ‘工商‘,
                data: [42.4, 33.2, 34.5, 39.7, 52.6],
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: ‘#666666‘,
                    align: ‘top‘,
                    x: 4,
                    y: -10,
                    style: {
                        fontSize: ‘10px‘,
                        fontFamily: ‘Verdana, sans-serif‘,
                        textShadow: ‘0 0 0px black‘
                    }
                }

            },{
                name:‘民生‘,
                data:[]
            },{
                name:‘淘宝‘,
                data:[]
            },{
                name:‘邮乐‘,
                data:[]
            },{
                name:‘一卡通‘,
                data:[]
            }]
时间: 2024-11-06 15:57:35

highcharts 柱状图动态设置数据应用实例的相关文章

highcharts 柱状图 动态加载

highcharts柱状图动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=request.getContextP

highcharts动态获取数据生成图表问题

动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴.  柱状图的动态传值: //获取后台数据 var x = [];//X轴 var y = [];//Y轴 var xtext = [];//X轴TEXT var color = ["#FFB6C1","#DC143C","#C71585","#D8BFD8","#8B008B","#4B0082","#6A5

EF数据迁移,未将对象引用设置到对象实例

现象: 执行Enable-Migrations -force时就报"未将对象引用设置到对象实例"的异常: DbProviderServicesExtensions.GetProviderManifestTokenChecked 原因: 1.项目启动项的App.config或web.config里面没有配置 entityFramework节点或connectionStrings节点,EF在数据迁移时找不到数据库连接串信息 2.项目启动项配置错误,应该选择有entityFramework节

activiti 7 + springboot2(八) Activiti流程实例动态设置assignee执行人

(一)activiti流程图用流程变量设置节点执行人 Activiti 使用 UEL 表达式, UEL 是 java EE6 规范的一部分, UEL(Unified Expression Language)即统一表达式语言, activiti 支持两个 UEL 表达式: UEL-value 和 UEL-method. <!--UEL-value: user1 是一个流程变量 --> <userTask activiti:assignee="${user1}$" act

BPM实例分享:动态设置字段必填

一些业务场景中,需要动态设置字段的必填. 比如QA场景中,选择不合格的时候,必须要填写原因,合格时不需要. 设置必填后,提交时会进行验证. //设置字段的必填样式 function setRequired(field, flag, row) { var ele = $.MvcSheetUI.GetElement(field, row) var ui = ele.SheetUIManager(); if (ele != null) { ui.Required = flag; if (flag) {

Activiti动态设置办理人扩展

作者:邓家海 扩展是要求对Activiti基础有一定的功底的 我们一直在努力,不是为了改变世界,只是不让世界去改变我们. 关键词:Assignee.Candidate users.Candidate groups:setAssignee.taskCandidateUser.taskCandidateGroup 主要解决问题:Activiti动态给任务节点设置办理人. 情景: 我们在做工作流开发,学习的时候一般都有这么一个过程: 第一阶段:最开始学习的时候,喜欢在设计流程的时候写死人名(即)办理人

highCharts 饼图动态加载

饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath()%>/boot_js/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=request.getContextPath()%>

Spring AOP根据JdbcTemplate方法名动态设置数据源

说明:现在的场景是,采用数据库(Mysql)复制(binlog)的方式在两台不同服务器部署并配置主从(Master-Slave)关系: 并需要程序上的数据操作方法来访问不同的数据库,比如,update方法访问主数据库服务器,query方法访问从数据库服务器. 即把"增删改"和"查"分开访问两台服务器,当然两台服务器的数据库同步事先已经配置好. 然而程序是早已完成的使用Spring JdbcTemplate的架构,如何在不修改任何源代码的情况下达到<本文标题&g

spring框架中多数据源创建加载并且实现动态切换的配置实例代码

原文:spring框架中多数据源创建加载并且实现动态切换的配置实例代码 源代码下载地址:http://www.zuidaima.com/share/1774074130205696.htm 在我们的项目中遇到这样一个问题:我们的项目需要连接多个数据库,而且不同的客户在每次访问中根据需要会去访问不同的数据库.我们以往在spring和hibernate框架中总是配置一个数据源,因而sessionFactory的dataSource属性总是指向这个数据源并且恒定不变,所有DAO在使用sessionFa