highcharts图表中级入门：图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现3 6、完整实例代码：

最新推荐文章于 2019-12-20 13:47:33 发布

beMyselfeveryday

最新推荐文章于 2019-12-20 13:47:33 发布

阅读量1k

点赞数

分类专栏： HighCharts 文章标签： HighChart

HighCharts 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

6、完整实例代码：

 
           view source 
            
           001. 
           <!DOCTYPE html> 
          
           002. 
           <html> 
          
           003. 
           <head> 
          
           004. 
           <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
          
           005. 
           <title>Highcharts Demo - jsFiddle demo</title>  
          
           006. 
           <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>      
          
           007. 
           <link rel="stylesheet" type="text/css" href="/css/result-light.css">  
          
           008. 
           <style type='text/css'>    
          
           009. 
           </style> 
          
           010. 
           <script type='text/javascript'>//<![CDATA[ 
          
           011. 
             
           012. 
           var chart = null; 
          
           013. 
           //图表高宽 
          
           014. 
           var chartWidth = 500; 
          
           015. 
           var chartHeight = 400; 
          
           016. 
           //图表字体变量 
          
           017. 
           var chartTitleFontSize = 14; //主标题字体大小 
          
           018. 
           var chartSubTitleFontSize = 12 //副标题字体大小 
          
           019. 
           var chartLegendFontSize = 12; //图例Legend的字体大小 
          
           020. 
           var chartCreditsFontSize = 9; //图例右下角所有者字体大小 
          
           021. 
             
           022. 
           $(function () { 
          
           023. 
           $(document).ready(function () { 
          
           024. 
           chart = new Highcharts.Chart({ 
          
           025. 
           chart: { 
          
           026. 
           renderTo: 'container', 
          
           027. 
           type: 'line', 
          
           028. 
           width: chartWidth, 
          
           029. 
           height: chartHeight 
          
           030. 
           }, 
          
           031. 
           title: { 
          
           032. 
           text: '图表手动放大缩小自动切换图标标题以及图例字体示例呈现', 
          
           033. 
           style: { 
          
           034. 
           fontSize: chartTitleFontSize 
          
           035. 
           } 
          
           036. 
             
           037. 
           }, 
          
           038. 
           subtitle: { 
          
           039. 
           text: 'Source: www.stepday.com', 
          
           040. 
           style: { 
          
           041. 
           fontSize: chartSubTitleFontSize 
          
           042. 
           } 
          
           043. 
           }, 
          
           044. 
           xAxis: { 
          
           045. 
           categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
          
           046. 
           'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
          
           047. 
           }, 
          
           048. 
           yAxis: { 
          
           049. 
           title: { 
          
           050. 
           text: '入住屌丝个数' 
          
           051. 
           }, 
          
           052. 
           plotLines: [{ 
          
           053. 
           value: 0, 
          
           054. 
           width: 1, 
          
           055. 
           color: '#808080' 
          
           056. 
           }] 
          
           057. 
           }, 
          
           058. 
           legend: { 
          
           059. 
           borderWidth:0, 
          
           060. 
           style: { 
          
           061. 
           fontSize: chartLegendFontSize 
          
           062. 
           } 
          
           063. 
           }, 
          
           064. 
           credits: { 
          
           065. 
           text: "www.stepday.com", 
          
           066. 
           href: "http://www.stepday.com", 
          
           067. 
           style: { 
          
           068. 
           color: "red" 
          
           069. 
           } 
          
           070. 
           }, 
          
           071. 
           series: [{ 
          
           072. 
           name: '2013年12月每月入住屌丝情况', 
          
           073. 
           data: [100,98,45,210,200,400,500,230,120,520,300,250] 
          
           074. 
           }] 
          
           075. 
           }); 
          
           076. 
           }); 
          
           077. 
           BindBtnClickEvent(); 
          
           078. 
           }); 
          
           079. 
             
           080. 
           ///给页面按钮注册事件 
          
           081. 
           function BindBtnClickEvent() { 
          
           082. 
           $("#btnFangDa").click(function () { 
          
           083. 
           ChartFangDa(); 
          
           084. 
           }); 
          
           085. 
           $("#btnSuoXiao").click(function () { 
          
           086. 
           ChartSuoXiao(); 
          
           087. 
           }); 
          
           088. 
           } 
          
           089.

beMyselfeveryday

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highcharts图表中级入门：图表手动放大缩小自动切换图表标题(title/subtitle)以及图例(legend)、credits字体示例呈现3 6、完整实例代码：

002.003.004.005.Highcharts Demo - jsFiddle demo 006. 007. 008. 009.010.//<![CDATA[011. 012.var chart = null;013.//图表高宽014.var chartWidth = 500;015.var chartHeight = 40
复制链接

扫一扫

专栏目录