charisma-master中繪points圖時遇到問題及解決方法
阿新 • • 發佈:2019-02-20
1、在專案中使用動態資料程式碼如下:
<div class="box col-md-12"> <div class="box-inner"> <div class="box-header well"> <h2><i class="glyphicon glyphicon-list-alt"></i> ***曲線</h2> <div class="box-icon"> <a href="#" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a> </div> </div> <div class="box-content"> <div id="portchart" class="center" style="height:300px"></div> <p id="hoverdata">滑鼠位置在 (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p> </div> </div> </div>
<script type="text/javascript"> $().ready(function(){ var profits = []; var minVal = 0; var maxVal = 0; <span style="color:#ff0000;">var minStart = ""; <c:forEach var="contract" items="${portreturnlist}" varStatus="state"> <c:if test="${state.index == 0}"> minStart = ${contract.workDate} + ""; minStart = minStart.substr(0, 4) + "-" + minStart.substr(4, 2) + "-" + minStart.substr(6, 2); </c:if> profits.push([${state.index}, ${contract.returnRate}]); if(minVal > ${contract.returnRate}) minVal = ${contract.returnRate}; if(maxVal < ${contract.returnRate}) maxVal = ${contract.returnRate}; </c:forEach></span> var plot = $.plot($("#portchart"), [ { data: profits, label: "***" } ], { series: { lines: { show: true }, points: { show: true } }, grid: { hoverable: true, clickable: true, backgroundColor: { colors: ["#fff", "#eee"] } }, xaxis: { ticks: [ <span style="color:#ff0000;"><c:forEach var="contract" items="${portreturnlist}" varStatus="state" <strong>--step--</strong>> <span style="white-space:pre"> </span>[${state.index}, ${contract.workDate}], </c:forEach></span> ] }, yaxis: { min: minVal - 1, max: maxVal + 1 }, colors: ["#539F2E", "#3C67A5"] }); function showTooltip(x, y, contents) { $('<div id="tooltip">' + contents + '</div>').css({ position: 'absolute', display: 'none', top: y + 5, left: x + 5, border: '1px solid #fdd', padding: '2px', 'background-color': '#dfeffc', opacity: 0.80 }).appendTo("body").fadeIn(200); } var previousPoint = null; $("#portchart").bind("plothover", function (event, pos, item) { $("#x").text(pos.x.toFixed(3)); $("#y").text(pos.y.toFixed(2)); if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var x = item.datapoint[0], y = item.datapoint[1].toFixed(2); <span style="color:#ff0000;">var xStr = addDaysForNum(x);</span> showTooltip(item.pageX, item.pageY, item.series.label + " 【" + xStr + " : " + y + "】"); } } else { $("#tooltip").remove(); previousPoint = null; } }); $("#portchart").bind("plotclick", function (event, pos, item) { if (item) { $("#clickdata").text("您點選的點 " + item.dataIndex + " 在 " + item.series.label + "."); plot.highlight(item.series, item.datapoint); } }); <span style="background-color: rgb(204, 255, 255);"> <span style="color:#ff0000;">function addDaysForNum(days){ var nd = new Date(minStart); nd = nd.valueOf(); nd = nd + days * 24 * 60 * 60 * 1000; nd = new Date(nd); var y = nd.getFullYear(); var m = nd.getMonth()+1; var d = nd.getDate(); if(m <= 9) m = "0"+m; if(d <= 9) d = "0"+d; return y + "" + m + "" + d; }</span></span> }); </script>
2、紅色的部分是我改造過的地方,其中前兩個部分動態資料,第二部分中--step--可以新增步長使橫座標表示更多的資料;
3、因為我的橫座標是日期,所以這裡添加了橫座標日期的顯示和處理;