kcharts前端js图表库之折线图
一个简单的折线图demo:
1.建立容器
- <div id="demo1">
- </div>
2.KISSY包配置：
- //包配置
- KISSY.config({
- combine:true,
- packages:[
- {
- name:"gallery",
- path:"http://a.tbcdn.cn/s/kissy/",
- charset:"utf-8"
- }
- ]
- });
关于kissy可以参考 官方网站 ：http://docs.kissyui.com/
3.引入linechart js文件
- KISSY.use("gallery/kcharts/1.1/linechart/index",function(S,LineChart){
- //TODO
- }
4.构造Linechart实例
- var linechart = new LineChart({
- renderTo:"#demo1",
- points:{
- attr:{
- type:"auto"
- }
- },
- yLabels:{
- css:{
- "marginLeft":"-4px",
- "font-family":"Microsoft Yahei",
- "font-size":"10px"
- }
- },
- xLabels:{
- css:{
- "font-family":"Microsoft Yahei",
- "font-size":"10px"
- }
- },
- title:{
- content:"Monthly Average Temperature",
- css:{
- }
- },
- anim:{},
- subTitle:{
- content:"Source: WorldClimate.com",
- css:{
- }
- },
- lineType:"arc",
- xAxis: {
- text:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
- 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
- },
- yAxis:{
- num:7
- },
- series:[{
- text: 'Tokyo',
- data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
- }, {
- text: 'New York',
- data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
- }
- , {
- text: 'Berlin',
- data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
- }, {
- text: 'London',
- 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]
- }
- ],
- defineKey:{
- x:"week",
- y:"y"
- },
- legend:{
- isShow:true,
- css:{
- marginLeft:250,
- marginTop:260
- }
- },
- tip:{
- offset:{
- x:10,
- y:10
- },
- template:function(){
- return "<span style='font-size:10px'>"+arguments['0']['text'] + "</span><br/>" + arguments['0']['y'] + "\u2103";
- }
- }
- });
整体代码如下：（复制到html文件运行即可）
- <!doctype html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <link rel="stylesheet" href="http://a.tbcdn.cn/p/global/1.0/global-min.css" />
- <style>
- #demo1{
- width:750px;
- height:300px;
- margin:0px auto;
- }
- #demo1 .ks-charts-legend ul li{
- float: left;
- padding: 10px;
- }
- #demo1 .ks-charts-legend .disable{
- color:#ccc;
- }
- #demo1 .ks-charts-legend .legend-text{
- padding-left: 5px;
- }
- </style>
- </head>
- <body>
- <div id="demo1">
- </div>
- <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>
- <script type="text/javascript">
- // KISSY.Config.debug = true;
- //包配置
- KISSY.config({
- combine:true,
- packages:[
- {
- name:"gallery",
- path:"http://a.tbcdn.cn/s/kissy/",
- charset:"utf-8"
- }
- ]
- });
- KISSY.use("gallery/kcharts/1.1/linechart/index",function(S,LineChart){
- var linechart = new LineChart({
- renderTo:"#demo1",
- points:{
- attr:{
- type:"auto"
- }
- },
- yLabels:{
- css:{
- "marginLeft":"-4px",
- "font-family":"Microsoft Yahei",
- "font-size":"10px"
- }
- },
- xLabels:{
- css:{
- "font-family":"Microsoft Yahei",
- "font-size":"10px"
- }
- },
- title:{
- content:"Monthly Average Temperature",
- css:{
- }
- },
- anim:{},
- subTitle:{
- content:"Source: WorldClimate.com",
- css:{
- }
- },
- lineType:"arc",
- xAxis: {
- text:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
- 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
- },
- yAxis:{
- num:7
- },
- series:[{
- text: 'Tokyo',
- data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
- }, {
- text: 'New York',
- data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
- }
- , {
- text: 'Berlin',
- data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
- }, {
- text: 'London',
- 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]
- }
- ],
- defineKey:{
- x:"week",
- y:"y"
- },
- legend:{
- isShow:true,
- css:{
- marginLeft:250,
- marginTop:260
- }
- },
- tip:{
- offset:{
- x:10,
- y:10
- },
- template:function(){
- return "<span style='font-size:10px'>"+arguments['0']['text'] + "</span><br/>" + arguments['0']['y'] + "\u2103";
- }
- }
- });
- });</script>
- </body>
- </html>