charisma-master中绘points图时遇到问题及解决方法

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、因为我的横坐标是日期，所以这里添加了横坐标日期的显示和处理；