JSP通过hignChart生成线状图-鼠标在图上时可以显示此时时间和此时对应的值

Controller端处理：

@RequestMapping(value="/ShowLineChartFundProfit/{comId}/{beginDate}/{endDate}")

public String ShowLineChartFundProfit(Model model,HttpServletRequest request,@PathVariable("comId") int comId,@PathVariable("beginDate") String beginDate,@PathVariable("endDate") String endDate){

FundCombination fundCombination = fundConbinationService.findFundCombinationById(comId);

Map<String, Object> params = new HashMap<String, Object>();

params.put("comId", comId);

params.put("beginDate", beginDate);

params.put("endDate", endDate);

List<AchievementCompare> achievementCompareList = exportFundFigureService.selectAchievementCompareProfitList(params);

List<FundCombination> fundCombinationList = exportFundFigureService.selectFundCombinationProfitList(params);

model.addAttribute("beginDate", beginDate);

model.addAttribute("endDate", endDate);

model.addAttribute("fundCombination", fundCombination);

model.addAttribute("achievementCompareList", achievementCompareList);

model.addAttribute("fundCombinationList", fundCombinationList);

return "calculate/showLineChartProfit.jsp";

}

对应的两个实体类：

public class AchievementCompare implements Serializable {

private static final long serialVersionUID = -9007219246488771811L;

private int id;

private String indexCode; //业绩比较基准代码

private String indexName; //业绩比较基准名称,如：中证100

private String rateDecimal; //比例

private String remark; //备注

private String comName; //所在组合名称

private int comId; //所在组合id

private String profitDate; //显示线状收益图时的收益时间

private float profitRate; //显示线状收益图是的收益率

public int getId() {

return id;

}

......

}

public class FundCombination implements Serializable {

private static final long serialVersionUID = -8040081446231402509L;

private int id;

private String comName; //组合名称

private String createTime; //创建时间

private String createName; //创建人

private String property; //组合属性,'1'表示长期组合，'0'表示短期组合

private String description; //组合描述

private int isPool; //0：表示基金组合，1：表示基金池

private String profitDate; //显示线状收益图时的收益时间

private float profitRate; //显示线状收益图是的收益率

public int getId() {

return id;

}

......

}

对应显示的JSP页面showLineChartProfit.jsp：

<head>

</head>

</div>

</div>

<input name="beginDate" id="beginDate" size="16" type="text"

value="${beginDate}" readonly> <span class="add-on"><i

class="icon-remove"></i></span> <span class="add-on"><i

class="icon-th"></i></span>

</div>

<input name="endDate" id="endDate" size="16" type="text"

value="${endDate}" readonly> <span class="add-on"><i

class="icon-remove"></i></span> <span class="add-on"><i

class="icon-th"></i></span>

</div>

</div>

function generateChart(){

var comId = ${fundCombination.id};

var beginDate = $("#beginDate").val();

var endDate = $("#endDate").val();

var url = "/yilucaifu-research/tool/ShowLineChartFundProfit/" + comId + "/" + beginDate + "/" + endDate + ".do";

window.location.href = url;

}

</script>

var data1=[<c:forEach items="${achievementCompareList}" varStatus="status" var="item">

[new Date(('${item.profitDate}')*1000).getTime(),parseFloat('${item.profitRate}')]

<c:if test="${(status.index+1)!=fn:length(achievementCompareList)}">,</c:if>

</c:forEach>];

var data2=[<c:forEach items="${fundCombinationList}" varStatus="status" var="item">

[new Date(('${item.profitDate}')*1000).getTime(),parseFloat('${item.profitRate}')]

<c:if test="${(status.index+1)!=fn:length(fundCombinationList)}">,</c:if>

</c:forEach>];

$('#chart').highcharts(

{

colors: [

'#ffbb40',

'#a43838'

title: {

text: "线性收益图"

tooltip: {

crosshairs: !0,

formatter: function () {

var date = new Date(this.x),

time = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日',

fundName = this.series.name;

return time + '<br/>' + fundName + ':<strong>' + this.y.toFixed(2) + '</strong>%<br/>'

}

xAxis: {

type: 'datetime',

gridLineWidth: 1,

labels: {

formatter: function () {

return ' 　' + Highcharts.dateFormat('%Y-%m-%d', this.value) + ' 　'

}

yAxis: {

title: {

text: '收益率(%)'

labels: {

formatter: function () {

return this.value + '%'

}

plotOptions: {

line: {

marker: {

radius: 0,

lineColor: '#666666',

lineWidth: 1

shadow: !1,

lineWidth: 2

}

series: [

{

name: "比较基准",

marker: {

symbol: 'square'

data: data1

{

name: '收益图',

marker: {

symbol: 'diamond'

data: data2

}

credits: {

enabled: true

}

);

</script>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。