jqplot 柱状图代码样式

<!doctype html>
<html>
<head>
<include file="Public:header"/>
<!--[if lt IE 9]>
<link rel="shortcut icon" type="favicon.icon" href="http://www.188568.com/favicon.ico"/>
<![endif]-->
<title>流量统计</title>
<script src="__TMPL__Public/js/browser.js"></script>
<!-- core -->
<script type="text/javascript" src="__TMPL__Public/jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="__TMPL__Public/jqplot/jquery.jqplot.css" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="__TMPL__Public/jqplot/excanvas.js"></script><![endif]-->

<!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="__TMPL__Public/jqplot/jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="__TMPL__Public/jqplot/plugins/jqplot.barRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="__TMPL__Public/jqplot/plugins/jqplot.pieRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="__TMPL__Public/jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="__TMPL__Public/jqplot/plugins/jqplot.highlighter.js"></script>
  <script language="javascript" type="text/javascript" src="__TMPL__Public/jqplot/plugins/jqplot.pointLabels.js"></script>
  <!-- END: load jqplot -->

</head>
<body>
<div class="bc">
 <p id="u">
     {$_SESSION['username']['username']}
     <if condition="$_SESSION['username']['username'] eq 'admin'">
         <a href="{:U('User/statistics')}">查看流量统计</a>
     </if>
     <a href="{:U('User/login')}?out=1">退出</a>
 </p>
 </div>
<div class="main_count">
    <input type="hidden" value="{$json}" name="json" class="json"/>
    <div id="chart" style="margin-left:20px; width:500px; height:240px;"></div>
</div>
<include file="Public:footer"/>
<script type="text/javascript" language="javascript">
 $(document).ready(function(){
      var line1 = $('.json').val();
      var line1 = jQuery.parseJSON(line1);
      $.jqplot.config.enablePlugins = true;
      var ticks = ['前个月', '上个月', '前天', '昨天'];
      var plot3 = $.jqplot('chart', [line1], {
              title:"流量统计",
              seriesDefaults: {
                  pointLabels: { show: true },
                  shadow: false,
                  showMarker: true, // 是否强调显示图中的数据节点
                  renderer: $.jqplot.BarRenderer,
                  rendererOptions: {
                      barWidth: 50,
                      barMargin: 50
                  },
                  color: '',
              },
              axesDefaults: {
                  min: null, //横(纵)轴最小刻度值
                  max: null, //横(纵)轴最大刻度值
                  renderer: $.jqplot.LinearAxisRenderer,
                  tickOptions: {
                      mark: 'inside',
                      showMark: true, //设置是否显示刻度
                  },
                  showTickMarks: true, // 设置是否显示刻度
              },
              axes: {
                  xaxis: {
                      show: false,    //是否自动显示坐标轴
                      renderer: $.jqplot.CategoryAxisRenderer,
                      ticks: ticks,
                      showTicks: false,        // 是否显示刻度线以及坐标轴上的刻度值
                      showTickMarks: false,    //设置是否显示刻度
                      tickOptions: {
                          show: true,
                          fontSize: '14px',
                          fontFamily: 'tahoma,arial,"Hiragino Sans GB",宋体b8b体,sans-serif',
                          showLabel: true, //是否显示刻度线以及坐标轴上的刻度值
                          showMark: false,//设置是否显示刻度
                          showGridline: false, // 是否在图表区域显示刻度值方向的网格
                      }
                  },
                  yaxis: {
                      show: false,
                      showTicks: false,        // 是否显示刻度线以及坐标轴上的刻度值
                      showTickMarks: false,     //设置是否显示刻度
                      autoscale: false,
                      borderWidth: 1,
                      tickOptions: {
                          show: false,
                          showLabel: false,
                          showMark: false,
                          showGridline: false,
                          formatString: ''
                      }
                  },
              },
              grid: {
                  drawGridLines: false,
                  background: '#fff',
                  drawBorder: true,
                  shadow: false,
                  borderColor: '#307083',     // 设置图表的(最外侧)边框的颜色
                  borderWidth: 1,           //设置图表的(最外侧)边框宽度
              },
              highlighter: { show: false }
          });
    });
</script>

你可能感兴趣的:(jqplot 柱状图代码样式)