Highcharts 插件的使用

菜鳥教程關於插件的使用教程

Highcharts 設置座標軸文字樣式

 

HighCharts解析之xAxis——x軸的樣式

 

 

 

Jquery畫折線圖、柱狀圖、餅圖

 

 

官網

 

插件導出【HighCharts系列教程】7、導出屬性——exporting 插件中提供導出功能。須要引入exporting.js

個人實際案例

一、數據獲取

<c:forEach items="${curLSDSI }" var="curLSDSI" varStatus="status">
                         <p class="hidden" id="time${status.count }"><fmt:formatDate value="${curLSDSI.recordDate }" pattern="yyyy-MM-dd"/></p>
                    </c:forEach>
                    <c:forEach items="${curLSDSI }" var="curLSDSI" varStatus="status">
                         <p class="hidden" id="planSum${status.count }">${curLSDSI.planQty }</p>
                    </c:forEach>
                    <c:forEach items="${curLSDSI }" var="curLSDSI" varStatus="status">
                         <p class="hidden" id="actSum${status.count }">${curLSDSI.actQty }</p>
                    </c:forEach>


var time1 = $("*[id='time1']").text().substring(8);
var time2 = $("*[id='time2']").text().substring(8);
var time3 = $("*[id='time3']").text().substring(8);
var time4 = $("*[id='time4']").text().substring(8);
var time5 = $("*[id='time5']").text().substring(8);
var time6 = $("*[id='time6']").text().substring(8);
var time7 = $("*[id='time7']").text().substring(8);
var planSum1 = Number($("*[id='planSum1']").text());
var planSum2 = Number($("*[id='planSum2']").text());
var planSum3 = Number($("*[id='planSum3']").text());
var planSum4 = Number($("*[id='planSum4']").text());
var planSum5 = Number($("*[id='planSum5']").text());
var planSum6 = Number($("*[id='planSum6']").text());
var planSum7 = Number($("*[id='planSum7']").text());
var actSum1 = Number($("*[id='actSum1']").text());
var actSum2 = Number($("*[id='actSum2']").text());
var actSum3 = Number($("*[id='actSum3']").text());
var actSum4 = Number($("*[id='actSum4']").text());
var actSum5 = Number($("*[id='actSum5']").text());
var actSum6 = Number($("*[id='actSum6']").text());
var actSum7 = Number($("*[id='actSum7']").text());

二、實現

/**
 * 界面柱形圖
 */
$(document).ready(function() {
       var title = {
          text: '前七天完成狀況'   
       };
       var xAxis = {
          categories: [time1, time2, time3, time4, time5, time6, time7],
          labels:{// X軸樣式
              style : {
                  fontSize : '20px',
                  color: '#000'
              },
              x:0,// 偏移
              y:20
          }          
       };
       var yAxis = {
          title: {
                text: '產量統計'
          }, 
          plotLines: [{
                value: 0,
                width: 1,
                color: '#8F8080'
          }],
          labels:{// Y軸樣式
              style : {
                  fontSize: '20px',
                  color: '#000'
              },
              x:0,// 偏移
              y:10
          }
       };
       var labels = {
          items: [{
             html: '',
                style: {
                   left: '50px',
                   top: '18px',
                   color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
          }]
       };
       var series= [{
            type: 'column',
                name: '實際產量',
                data: [ actSum1, actSum2, actSum3, actSum4, actSum5, actSum6, actSum7]
            }, {
                type: 'spline',
                name: '目標產量',
                data: [planSum1, planSum2, planSum3, planSum4, planSum5, planSum6, planSum7],
                marker: {
                    lineWidth: 2,
                    lineColor: Highcharts.getOptions().colors[6],
                    fillColor: 'white'
                }
            }
       ];
       var json = {};
       json.title = title;
       json.xAxis = xAxis;
       json.yAxis = yAxis;
       json.labels = labels;
       json.series = series;
       $('#container').highcharts(json);
});

界面展現
<div id="container" style="width: auto; height: 275px; margin: 0 auto"></div>

三、引入

    <script type="text/javascript" src="resources/js/highcharts.js"></script>
    <script type="text/javascript" src="resources/js/exporting.js"></script>

 

四、效果實際上是這樣噠