荣耀彩票代理

IT技术互动交流平台

Highcharts让你的网页上图表画的飞起

作者:Chandler Qian  发布日期:2014-10-10 20:39:45

荣耀彩票代理 HighchartsSHIYIKUANCHUNjavascriptBIANXIEDETUBIAOKU,NENGGOUHENJIANDANBIANJIEDEZAIWebWANGZHANHUOWebYINGYONGZHONGTIANJIAJIAOHUXINGDETUBIAO,HighchartsMUQIANZHICHIZHIXIANTU、QUXIANTU、MIANJITU、ZHUZHUANGTU、BINGTU、SANDIANTUDENGDUODA18ZHONGBUTONGLEIXINGDETUBIAO,KEYIMANZUNIDUIWebTUBIAODERENHEXUQIU !

   YISHANGSHIHighchartsZHONGWENWANGSHANGDEJIANJIE!

荣耀彩票代理  RUGUOLUNYUFADEJIANDANXING,HUOZHEXUYAOHUAGONGNENGJIANDANDEZHEXIAN、ZHUZHUANGYIJIBINGZHUANGTU,HighchartsSHIYUANYUANBURUjsTUBIAOKU——js charts DE,DANSHIRUGUOSHEJIDAOFUZADUOYANGDEGONGNENGTEXING,HighchartsSHUAILEjs chartsHEZHI8TIAOJIE!

  ZHEILEIDEJsKUANGJIATONGCHANGHENRONGYIXUEXI。XIAZAILEBAOHOU,KANLIZIJIUKEYILE,BUGUOHighchartsZAIZHEIDIANSHANGZUODESHIFEICHANGHAO! 

  JIAN:

  HighchartsZHONGWENWANGRONGYAOCAIPIAODAILI:http://www.hcharts.cn/index.php

荣耀彩票代理  HighchartsGUANWANG:http://www.highcharts.com/

  XUEXIhighchartsWUXUANZHAOBAOXIADEexamplesLIZIYIGEGEQUSHI(WOXUEjs chartsJIUSHIZHEIMEZUODE !- -),

  TONGGUOZHONGWENWANGTIGONGDEZHEI3GEYEMIAN,YIGEXIAOSHINIJIUKEYICHUBUZHANGWOZHEIXIANGJISHU!

    HighchartsZHONGWENJIAOCHENG

  Highcharts APIWENDANG

荣耀彩票代理  Highcharts ZAIXIANYANSHIPINGTAI

    学习的重点就是这个在线演示平台啦,它包含了下载包中的所有示例文件。而且可以点击qq荣耀彩票代理qpqaGvq7CF4JIVVVVRoxLRQKxq8N1A9Q/Grc/uskWpDDdHR02H2dBH1vTD6f39/f/yeiw/7+fj6ft/9yHjxkHpund+hVZ8VisVAo5BEdCoVCsVi0/6ozPGQem6eHL478D4AvjvwxaLw4EkF+ymBMEQeAMUUcAMYUcQAYU8QBYEwRB4AxRRwAxhRxABhTxAFgTBEHgDFFHMC/AMmPjQU9vQpUAAAAAElFTkSuQmCC" />页面中间的这个“编辑代码”可以跳转到一个“在线测试平台”的地方,像这里http://www.hcharts.cn/test/index.php?from=demo&p=10

   ZAIXIANYANSHIPINGTAIZUODEYEFEICHANGXIANGXI,BUGUOHENDUOBANKUAIHAIZAIWANSHANZHONG。。。

荣耀彩票代理  highchartsXUEXIDERUKOUSHISHENMENI,JIUSHIGUANWANGDEZHEIGETULA(ZHEILICONGGUANWANGNAXIALAI):

荣耀彩票代理  ZHEILISHIYIGETUBIAODESUOYOUSHUXING。YIMULERAN。

ZHEILISHIGUANWANGSHANGDEYIGEJIANDANDETUBIAOSHILI:

ZHEIGESHILISHIYOUXIAMIANDEDAIMAZHIJIESHENGCHENGDE。WOJIANDANZHUSHILEYIXIA。DAIMAWEIYUHighlchar-4.0.3XIA,Highcharts-4.0.3examplesline-labelsindex.html,ZHIJIEDAKAIJIKE。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>Highcharts Example</title>

        <!--值得注意的是,Highcharts运行需要两个js文件,Highcharts.js及jQuery、MooTools 、Prototype 、
Highcharts Standalone Framework 中的一个框架文件。(抄自官网...)-->
        <script type='text/javascript' src='http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js'></script>
        <style type='text/css'>
${demo.css}
        </style>
        <script type='text/javascript'>
$(function () {
        $('#container').highcharts({
            chart: {    //图表总体的设置
                type: 'line'    //这个默认为line即折线图,还可以为柱状column,不过饼状图不是这里设置,而是直接在series数据列上指定 type: 'pie',
            },
            title: {    //图表标题
                text: 'Monthly Average Temperature' //标题名称
            },
            subtitle: { //副标题
                text: 'Source: WorldClimate.com'
            },
            xAxis: {    //x轴
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']    //x轴数据
            },
            yAxis: {    //Y轴
                title: {
                    text: 'Temperature (?C)'    //y轴标题
                }
            },
            plotOptions: {                  //图表标示的各种选项
                line: {                     //这里由于是折线图,那么就是折线图的选项
                    dataLabels: {           //数据标签
                        enabled: true       //允许显示数据,默认为false,不显示具体数据
                    },
                    enableMouseTracking: false  //这个让鼠标放到数据点的时候,不动态显示一个小圆圈,默认为true
                }
            },
            series: [{  //这里省略了一个data数组的标示,更为方便,实际上下面的name和data都是属于data数组元素的属性,下面2组数据,就代表2组数据并列
                name: 'Tokyo',      //数据名
                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: '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]
            }]
        });
    });


        </script>
    </head>
    <body>
<script src='../../js/highcharts.js'></script>
<script src='../../js/modules/exporting.js'></script>

<div id='container' style='min-width: 310px; height: 400px; margin: 0 auto'></div>

    </body>
</html>

荣耀彩票代理  highchartsSHIYIGEJIANDANDEjsTUBIAOKUANGJIA,BUJIANYIZIXIYUEDUAPIWENDANG,JIANYIGENJUSHILIHESHIJIXUQIU,YIBIANTIANJIAGONGNENG,YIBIANKUAISUXUEXI。

  PS : JINGSIKEDIYATIXING,CAIFAXIAN,ZHEIGEhighcharsZHONGWENWANGGENbootstrapZHONGWENWANGJIBENJIYUTONGYANGDEZHUYEYANGSHI,SHIYIGEJINNIANGANGBIYEDEXUESHENGCHUANGBANDE,SHIZAINIANQINGYOUWEI!GENhighchartsGUANFANG(http://www.highcharts.com)DEGUANXIQISHIBUDA。BUGUOZUOWEIFEIYINGLIXINGDEWANGZHAN,SHIHENBUCUOLE!bootstrapZHONGWENWANGQISHIYEGENZHEIGELEISI。GERENCAICE,ZHEIXIEZHONGWENWANGKENENGGENGUOWAIGUANWANGDEGUANXIDOUBUDA,ZHISHIGUONEIREXINDEJISHURENYUANWEILEJISHUJIAOLIUERZIXINGCHUANGLIDE,WANGZHANNEIRONGJIBENSHIYUANYUGUANWANGDE。

CHUCHU:http://www.cnblogs.com/zrtqsk/p/4013980.html XIEXIE!

Tag标签:      
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规