/*function get_data(url, callback){ if(url=="la.anyone.alldata"){ callback([ {name:"张三", id:133, approve:300, decline:400, Accumulate:1000,worktime:1}, {name:"李四", id:133, approve:300, decline:400, Accumulate:1000,worktime:2}, ]); return; } callback([{x:1527957798468,y:3000},{x:1527957799468,y:3000},{x:1527957800468,y:3000.5},{x:1527957801468,y:3001}]); } get_data('la.acceptedCount.3600',mmm); function mmm(shuju) { console.log("------ getting la.acceptedCount.3000 -------") console.log(shuju); var chart = Highcharts.chart('container1',{ chart: { type: 'spline' }, title: { text: '月平均降雨量' }, subtitle: { text: '数据来源: WorldClimate.com' }, xAxis: { tickInterval: 1000, // 坐标轴刻度间隔为一星期 tickWidth: 0, gridLineWidth: 1, // 时间格式化字符 // 默认会根据当前的刻度间隔取对应的值,即当刻度间隔为一周时,取 week 值 dateTimeLabelFormats: { week: '%Y-%m-%d' } }, yAxis: { // min: 0, // title: { // text: '降雨量 (mm)' // } }, tooltip: { // head + 每个 point + footer 拼接成完整的 table headerFormat: '{point.key}', pointFormat: '' + '', footerFormat: '
{series.name}: {point.y:.1f} mm
', shared: true, useHTML: true }, plotOptions: { column: { borderWidth: 0 } }, series: [{ name: '东京', data: shuju }] }); } setInterval(lll,100); function lll() { } get_data("la.anyone.alldata", showAllData); function showAllData(shuju){ var htmlbody = ""; var i = 0; for(i=0; i < shuju.length; i++){ var one_person = shuju[i]; htmlbody += ""; htmlbody += " \n" + " "+one_person.name+"("+one_person.id+")\n" + " "+one_person.approve+"\n" + " "+one_person.decline+"\n" + " "; htmlbody += ""; } $("#rank-one").html(htmlbody); }*/ var chart = Highcharts.chart('container1', { title: { text: '合格数' }, /*subtitle: { text: '数据来源:thesolarfoundation.com' },*/ xAxis: { title: { text: '员工' } }, yAxis: { title: { text: '就业人数' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: '安装,实施人员', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: '工人', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: '销售', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: '项目开发', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: '其他', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); var chart = Highcharts.chart('container2', { chart: { type: 'bar' }, title: { text: '不合格数' }, xAxis: { categories: ['苹果', '橘子', '梨', '葡萄', '香蕉'] }, yAxis: { min: 0, title: { text: '员工' } }, legend: { /* 图例显示顺序反转 * 这是因为堆叠的顺序默认是反转的,可以设置 * yAxis.reversedStacks = false 来达到类似的效果 */ reversed: true }, plotOptions: { series: { stacking: 'normal' } }, series: [{ name: '小张', data: [5, 3, 4, 7, 2] }, { name: '小彭', data: [2, 2, 3, 2, 1] }, { name: '小潘', data: [3, 4, 4, 2, 5] }] }); var chart = Highcharts.chart('container3', { chart: { type: 'column' }, title: { text: '堆积数' }, /*subtitle: { text: '数据截止 2017-03,来源: Wikipedia' },*/ xAxis: { type: 'category', /* labels: { rotation: -45 // 设置轴标签旋转角度 }*/ title: { text: '员工' } }, yAxis: { min: 0, title: { text: '人口 (百万)' } }, legend: { enabled: false }, tooltip: { pointFormat: '人口总量: {point.y:.1f} 百万' }, series: [{ name: '总人口', data: [ ['上海', 24.25], ['卡拉奇', 23.50], ['北京', 21.51], ['德里', 16.78], ['拉各斯', 16.06], ['天津', 15.20], ['伊斯坦布尔', 14.16], ['东京', 13.51], ['广州', 13.08], ['孟买', 12.44], ['莫斯科', 12.19], ['圣保罗', 12.03], ['深圳', 10.46], ['雅加达', 10.07], ['拉合尔', 10.05], ['首尔', 9.99], ['武汉', 9.78], ['金沙萨', 9.73], ['开罗', 9.27], ['墨西哥', 8.87] ], dataLabels: { enabled: true, rotation: -90, color: '#FFFFFF', align: 'right', format: '{point.y:.1f}', // :.1f 为保留 1 位小数 y: 10 } }] }); var chart = Highcharts.chart('container4', { chart: { type: 'line' }, title: { text: '工作时长' }, /*subtitle: { text: '数据来源: WorldClimate.com' },*/ xAxis: { title: { text: '员工' } }, yAxis: { title: { text: '气温 (°C)' } }, plotOptions: { line: { dataLabels: { // 开启数据标签 enabled: true }, // 关闭鼠标跟踪,对应的提示框、点击事件会失效 enableMouseTracking: false } }, series: [{ name: '东京', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] }, { name: '伦敦', data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] }] }); var chart = Highcharts.chart('container5', { chart: { type: 'column' }, title: { text: '不良率' }, xAxis: { /*categories: ['苹果', '橘子', '梨', '葡萄', '香蕉']*/ title: { text: '员工' } }, yAxis: { min: 0, title: { text: '水果消费总量' } }, tooltip: { pointFormat: '{series.name}: {point.y}' + '({point.percentage:.0f}%)
', //:.0f 表示保留 0 位小数,详见教程:https://www.hcharts.cn/docs/basic-labels-string-formatting shared: true }, plotOptions: { column: { stacking: 'percent' } }, series: [{ name: '小张', data: [5, 3, 4, 7, 2] }, { name: '小彭', data: [2, 2, 3, 2, 1] }, { name: '小潘', data: [3, 4, 4, 2, 5] }] });