文档章节

Highcharts 条形图

DannyTam
 DannyTam
发布于 2015/02/05 23:34
字数 111
阅读 10
收藏 0
var options = {
	chart: {
            type: 'bar',
        renderTo:'container'
        },
        title: {
            text: 'Historic World Population by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
            title: {
                text: null
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)',
                align: 'high'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            valueSuffix: ' millions'
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -40,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: '#FFFFFF',
            shadow: true
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Year 2008',
            data: [973, 914, 4054, 732, 340]
        }]


};

$(document).ready(function(){
	var chart = new Highcharts.Chart(options);

	$("button.change").click(function(){
		chart.xAxis[0].setCategories(['1', '2', '3', '4', '5']);
		chart.series[0].setData([673, 214, 404, 752, 440]);
	});
});


© 著作权归作者所有

上一篇: JS
下一篇: 老虎机
DannyTam
粉丝 4
博文 111
码字总数 58790
作品 0
深圳
程序员
私信 提问
网页图表Highcharts实践教程之认识Highcharts

网页图表Highcharts实践教程之认识Highcharts 第1章 认识Highcharts Highcharts是国际知名的一款图表插件。它完全使用Javascript编写实现。其结构清晰,使用简单。开发人员可以很轻松地构建出...

大学霸
2015/05/27
0
0
Highcharts导出代码Java版

Highcharts是一个用纯JavaScript编写的图表库,提供了一个交互式的图表添加到您的网站或Web应用程序的简单方法。Highcharts目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点...

山哥
2011/09/27
0
0
基于MVC4+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀。本篇主要介绍在Web...

walb呀
2017/12/04
0
0
11 个用来创建图形和图表的 JavaScript 工具包

Aristochart DEMO || Download Aristochart 是一个用来创建图形和图表的最佳 JavaScript 工具包之一。完全可定制的灵活线图库。 Morris.Js – Pretty Time-Series Line Graphs DEMO || Downl...

oschina
2013/08/06
9.3K
19
周边花絮.js.14种流行的基于JavaScript的数据可视化工具?

简单介绍: 俗话说,一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解,让信息发布者更加高效地展示自己的核心内容。在前端开发中,如果缺少合适工具,制作数据可视化图表会十分...

满满李
2016/05/16
163
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机网络

计算机网络体系结构 OSI 其中表示层和会话层用途如下: 表示层 :数据压缩、加密以及数据描述,这使得应用程序不必关心在各台主机中数据内部格式不同的问题。 会话层 :建立及管理会话。 五层...

一只小青蛙
今天
2
0
0.01-Win10安装linux子系统

一、安装Debian子系统 -1、控制面板设置: -1.1、打开“控制面板” —— “程序” —— “启用或关闭Windows功能” —— 勾选 “适用于Linux的Windows子系统” -2、设置: -2.1、打开“设置”...

静以修身2025
昨天
2
0
init 0-6 (启动级别:init 0,1,2,3,4,5,6)

启动级别: init 0,1,2,3,4,5,6 这是个很久的知识点了,只是自己一直都迷迷糊糊的,今天在翻出来好好理解下。。 0: 停机 1:单用户形式,只root进行维护 2:多用户,不能使用net file system...

圣洁之子
昨天
2
0
Android Camera HAL浅析

1、Camera成像原理介绍 Camera工作流程图 Camera的成像原理可以简单概括如下: 景物(SCENE)通过镜头(LENS)生成的光学图像投射到图像传感器(Sensor)表面上,然后转为电信号,经过A/D(模数转...

天王盖地虎626
昨天
2
0
聊聊Elasticsearch的ProcessProbe

序 本文主要研究一下Elasticsearch的ProcessProbe ProcessProbe elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/process/ProcessProbe.java public class ProcessProb......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部