我正在尝试将动态输入传递到 JSP 页面上的融合图表。我实际上正在尝试渲染一个条形图，但我不确定其列数。在下面的代码片段中，在数据部分，我需要动态传递变量的数量。是否可以？有人可以帮忙吗
data: [
{
"label": "Inprogress",
"value": "<%=cummulativeInprogress%>"
},
{
"label": "Completed",
"value": "<%=cummulativeCompleted%>"
},
{
"label": "Aborted",
"value": "<%=cummulativeAborted%>"
},
{
"label": "Failed",
"value": "<%=cummulativeFailed%>"
},
{
"label": "Cancelled",
"value": "<%=cummulativeCancelled%>"
},
{
"label": "Amending",
"value": "<%=cummulativeAmending%>"
}
]
}
}).render();
})
您需要将 json 对象传递给 fusioncharts 引擎来渲染图表。然后，如果您需要更改数据图，您可以再次进行 ajax 调用来获取新的 json 对象并刷新图表显示。
您可以尝试实现以下代码部分 -
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="java.util.*" %>
<%@page import="fusioncharts.FusionCharts" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>FusionCharts | Simple Chart Using Array</title>
<link href="../Styles/ChartSampleStyleSheet.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
</head>
<body>
<h3>Simple Chart Using Array</h3>
<div id="chart"></div>
<div><span><a href="../Index.jsp">Go Back</a></span></div>
<%
// store chart config name-config value pair
Map<String, String> chartConfig = new HashMap<String, String>();
chartConfig.put("caption", "Countries With Most Oil Reserves [2017-18]");
chartConfig.put("subCaption", "In MMbbl = One Million barrels");
chartConfig.put("xAxisName", "Country");
chartConfig.put("yAxisName", "Reserves (MMbbl)");
chartConfig.put("numberSuffix", "k");
chartConfig.put("theme", "fusion");
//store label-value pair
Map<String, Integer> dataValuePair = new HashMap<String, Integer>();
dataValuePair.put("Venezuela", 290);
dataValuePair.put("Saudi", 260);
dataValuePair.put("Canada", 180);
dataValuePair.put("Iran", 140);
dataValuePair.put("Russia", 115);
dataValuePair.put("UAE", 100);
dataValuePair.put("US", 30);
dataValuePair.put("China", 30);
StringBuilder jsonData = new StringBuilder();
StringBuilder data = new StringBuilder();
// json data to use as chart data source
jsonData.append("{'chart':{");
for(Map.Entry conf:chartConfig.entrySet())
{
jsonData.append("'" + conf.getKey()+"':'"+conf.getValue() + "',");
}
jsonData.replace(jsonData.length() - 1, jsonData.length() ,"},");
// build data object from label-value pair
data.append("'data':[");
for(Map.Entry pair:dataValuePair.entrySet())
{
data.append("{'label':'" + pair.getKey() + "','value':'" + pair.getValue() +"'},");
}
data.replace(data.length() - 1, data.length(),"]");
jsonData.append(data.toString());
jsonData.append("}");
//Create chart instance
// charttype, chartID, width, height,containerid, data format, data
FusionCharts firstChart = new FusionCharts(
"column2d",
"first_chart",
"800",
"550",
"chart",
"json",
jsonData.toString()
);
%>
<%= firstChart.render() %>
</body>
</html>
请参阅文档 - https://www.fusioncharts.com/dev/getting-started/java/configure-your-chart-using-java