在Google图表中提供按钮和下拉列表
在Google图表中提供按钮和下拉列表
提问于 2017-03-24 14:05:30
我将Google Charts嵌入到我的应用程序中，它显示在UI端，如下图所示：
下拉列表如下图所示：
我附加了一个链接和图表中的一个按钮作为“出口”和“表数据”，在上面的图像中看到。在"Export“中，我提供了一个下拉列表。在其他图表中，我只能获得“导出”链接，也无法获得下拉列表。
为了嵌入各种图表，我为每个图表使用了单独的JSP文件，例如，如果我嵌入了柱状图和饼图，那么我就会为这两个图表创建不同的JSP文件。
为此，我使用了两个JSP文件，一个是dashboardLayout.jsp，对于嵌入的各种图表，我使用了foreach循环。代码片段如下所示：
dashboardLayout.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
button {
color:#fff;
background-image: linear-gradient(to bottom,#337ab7 0,#265a88 100%);
padding: 5px 10px;
font-size: px;
line-height: 1.5;
border-radius: 3px;
cursor: pointer;
border-color: #265a88;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);
}
button:hover{
background-image: linear-gradient(to top,#337ab7 0,#265a88 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25),0 1px 1px rgba(0,0,0,.175);
}
</style>
<style>
.click {
background:none!important;
border:none;
padding:0!important;
font-family:Helvetica Neue,Helvetica,Arial,sans-serif; /*input has OS specific font-family*/
color:#333;
cursor:pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdownhover {
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 15px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #666666;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
padding: 2px 2px;
text-align: left;
text-decoration: none;
display: block;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}
.dropdown-content a:hover {background-color: #111111}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart','table','timeline','charteditor']});
$(document).ready(function() {
$(".column").sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all",
stop : function(event, ui) {
var currentDivId = this.id;
var parentDivId = $(ui.item).parents().attr('id')
console.log('javascript ==> currentDivId : '+currentDivId+", parentDivId : "+parentDivId);
if(currentDivId != parentDivId){
updateDashboardChartOrderAjaxFunction(currentDivId, parentDivId);
}
}
})
$(".portlet")
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
});
function chartScrollBarHide(divId) {
$('#'+divId).css("overflow-x", "hidden");
$('#'+divId).css("margin-bottom", "48px");
}
</script>
<c:forEach var="chart" items="${chartPropertiesList}" varStatus="theCount">
<div class="column" id="${chart.merchantReportId}/${theCount.count}">
<div class="portlet" id="${chart.chartHeaderTitle}">
<div class="portlet-header">${chart.chartHeaderTitle}</div>
<c:if test="${not empty chart.merchantReportData.responseData or not empty chart.merchantReportData.categoriesJsonData}">
<div style="text-align: center; padding: 5px 0px;" class="boson-font">
Change Chart :
<select id="changeChart${theCount.count}" name="changeChart${theCount.count}" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif;font-size: 15px;"
onchange="changeChartAjaxFunction('${chart.merchantReportId}','${chart.chartDivId}',this.value);" >
<c:forEach var="chartType" items="${chartTypeNameList}">
<c:choose>
<c:when test="${chartType.key eq chart.chartName}">
<option value="${chartType.key}" selected="selected">${chartType.value}</option>
</c:when>
<c:otherwise>
<option value="${chartType.key}">${chartType.value}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
<div class="dropdown">
<a href="#" class="dropdownhover">Export</a>
<div class="dropdown-content" id="export"></div>
</div>
<a href="#" class="dropdownhover" id="tables"></a>
</div>
</c:if>
<c:choose>
<c:when test="${chart.chartName eq 'columnbar'}">
<jsp:include page="chartsview/columnBarChart.jsp">
<jsp:param name="chartDivId" value="${chart.chartDivId}"/>
<jsp:param name="jsondata" value="${chart.merchantReportData.responseData}"/>
<jsp:param name="linkedJsonData" value="${chart.merchantReportData.responseLinkedData}"/>
<jsp:param name="xaxisLable" value="${chart.xAxisLable}"/>
<jsp:param name="yaxisLable" value="${chart.yAxisLable}"/>
</jsp:include>
<div class="portlet-content" id="${chart.chartDivId}"> ColumnBar Chart load here </div>
</c:when>
<c:when test="${chart.chartName eq 'pie'}">
<jsp:include page="chartsview/pieChart.jsp">
<jsp:param name="chartDivId" value="${chart.chartDivId}"/>
<jsp:param name="jsondata" value="${chart.merchantReportData.responseData}"/>
<jsp:param name="linkedJsonData" value="${chart.merchantReportData.responseLinkedData}"/>
<jsp:param name="xaxisLable" value="${chart.xAxisLable}"/>
<jsp:param name="yaxisLable" value="${chart.yAxisLable}"/>
</jsp:include>
<div class="portlet-content" id="${chart.chartDivId}"> Pie Chart load here pie</div>
</c:when>
</c:choose>
</div>
</div>
<c:if test="${empty chart.merchantReportData.responseData and empty chart.merchantReportData.categoriesJsonData}">
<script type="text/javascript">
chartScrollBarHide('${chart.chartDivId}');
</script>
</c:if>
</c:forEach>columBarChart.jsp
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart','table','timeline','charteditor']});
google.charts.setOnLoadCallback(drawChart);
var chartDivId = null;
var options = null;
var data = null;
var fileName = 'Test';
function AddNamespaceHandler() {
var svg = jQuery("#"+chartDivId+" svg");
svg.attr("xmlns", "http://www.w3.org/2000/svg");
svg.css('overflow','visible');
}
function drawChart() {
var chartData = [
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 450, 614.6],
['2005/06', 135, 1120, 599, 288, 682],
['2006/07', 157, 1167, 587, 397, 623],
['2007/08', 139, 1110, 615, 215, 609.4],
['2008/09', 136, 691, 629, 366, 569.6]
];
chartDivId = "${param.chartDivId}";
//chartDivId="17Div2";
if(!chartDivId){
chartDivId = "${chartDivId}";
}
console.log("columnbar div id: " + chartDivId);
var xaxisLable = "${param.xaxisLable}";
if(!xaxisLable){
xaxisLable = "${xaxisLable}";
}
var yaxisLable = "${param.yaxisLable}";
if(!yaxisLable){
yaxisLable = "${yaxisLable}";
}
data = google.visualization.arrayToDataTable(chartData);
options = {
title: 'Monthly Coffee Production by Country',
hAxis: {title: xaxisLable},
vAxis: {title: yaxisLable},
width : "600",
height : "300"
};
var chart = new google.visualization.ColumnChart(document.getElementById(chartDivId));
google.visualization.events.addListener(chart, 'ready', AddNamespaceHandler);
chart.draw(data, options);
var exportsColumn="return xepOnline.Formatter.Format('"+chartDivId+"', {render:'download', mimeType:'application/pdf', filename:'"+fileName+"'})";
//jQuery('#export').html('<a href="#" onclick="'+ exports +'">Export To PDF</a>');
var exportsColumn1="return xepOnline.Formatter.Format('"+chartDivId+"', {render:'download', mimeType:'image/svg+xml', filename:'"+fileName+"'})";
jQuery('#export').html('<a href="#" onclick="'+ exportsColumn +'">Export To PDF</a> <a href="#" onclick="'+ exportsColumn1 +'">Export To Image</a>');
// Chart Table Data - Start
jQuery('#tables').html('<button class="click" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; box-shadow: 0 0 0 0;" data-toggle="modal" data-target="#openModal" onclick="loadExportChartTable();">Table Data</button>');
var buttons="return xepOnline.Formatter.Format('parent_table', {render:'download',mimeType:'application/pdf', filename:'"+fileName+"'})";
jQuery('#buttons_table').html('<button onclick="'+ buttons +'">PDF</button> <button onclick="dataTableToCSV();">EXCEL</button>');
/* jQuery('#buttons_table').append(" ");
jQuery('#buttons_table').append('<button onclick="dataTableToCSV();">EXCEL</button>'); */
// Chart Table Data - End
}
// Load the Export Chart table data
function loadExportChartTable() {
var table_data = new google.visualization.Table(document.getElementById('table_div'));
google.visualization.events.addListener(table_data, 'ready', AddNamespaceHandler);
table_data.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}
function dataTableToCSV() {
var dataTable_arg = data;
var dt_cols = dataTable_arg.getNumberOfColumns();
var dt_rows = dataTable_arg.getNumberOfRows();
var csv_cols = [];
var csv_out;
for (var i=0; i<dt_cols; i++) {
csv_cols.push(dataTable_arg.getColumnLabel(i).replace(/,/g,""));
}
csv_out = csv_cols.join(",")+"\r\n";
for (i=0; i<dt_rows; i++) {
var raw_col = [];
for (var j=0; j<dt_cols; j++) {
raw_col.push(dataTable_arg.getFormattedValue(i, j, 'label').replace(/,/g,""));
}
csv_out += raw_col.join(",")+"\r\n";
}
//return csv_out;
this.downloadCSV(csv_out, fileName);
}
function downloadCSV (csv_out, fileName) {
var blob = new Blob([csv_out], {type: 'text/csv;charset=utf-8'});
var url = window.URL || window.webkitURL;
var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
link.href = url.createObjectURL(blob);
link.download = fileName+".csv";
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
link.dispatchEvent(event);
}
</script>pieChart.jsp
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart','table','timeline','charteditor']});
google.charts.setOnLoadCallback(drawChart);
var chartDivId = null;
var options = null;
var data = null;
var fileName = 'Test';
function AddNamespaceHandler() {
var svg = jQuery("#"+chartDivId+" svg");
svg.attr("xmlns", "http://www.w3.org/2000/svg");
svg.css('overflow','visible');
}
var chartData = [
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 450, 614.6],
['2005/06', 135, 1120, 599, 288, 682],
['2006/07', 157, 1167, 587, 397, 623],
['2007/08', 139, 1110, 615, 215, 609.4],
['2008/09', 136, 691, 629, 366, 569.6]
];
function drawChart() {
chartDivId = "${param.chartDivId}";
if(!chartDivId){
chartDivId = "${chartDivId}";
}
console.log("pieChart div id: " + chartDivId);
var xaxisLable = "${param.xaxisLable}";
if(!xaxisLable){
xaxisLable = "${xaxisLable}";
}
var yaxisLable = "${param.yaxisLable}";
if(!yaxisLable){
yaxisLable = "${yaxisLable}";
}
var data = google.visualization.arrayToDataTable(chartData);
var options = {
title: 'Monthly Coffee Production by Country',
hAxis: {title: xaxisLable},
vAxis: {title: yaxisLable},
width : "600",
height : "300"
};
var chart = new google.visualization.PieChart(document.getElementById(chartDivId));
google.visualization.events.addListener(chart, 'ready', AddNamespaceHandler);
chart.draw(data, options);
var exportsPie="return xepOnline.Formatter.Format('"+chartDivId+"', {render:'download', mimeType:'application/pdf', filename:'"+fileName+"'})";
var exportsPie1="return xepOnline.Formatter.Format('"+chartDivId+"', {render:'download', mimeType:'image/svg+xml', filename:'"+fileName+"'})";
jQuery('#export').html('<a href="#" onclick="'+ exportsPie +'">Export To PDF</a> <a href="#" onclick="'+ exportsPie1 +'">Export To Image</a>');
// Chart Table Data - Start
jQuery('#tables').html('<button class="click" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; box-shadow: 0 0 0 0;" data-toggle="modal" data-target="#openModal" onclick="loadExportChartTable();">Table Data</button>');
var buttons="return xepOnline.Formatter.Format('parent_table', {render:'download',mimeType:'application/pdf', filename:'"+fileName+"'})";
jQuery('#buttons_table').html('<button onclick="'+ buttons +'">PDF</button> <button onclick="dataTableToCSV();">EXCEL</button>');
// Chart Table Data - End
}
// Load the Export Chart table data
function loadExportChartTable() {
var table_data = new google.visualization.Table(document.getElementById('table_div'));
google.visualization.events.addListener(table_data, 'ready', AddNamespaceHandler);
table_data.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
}
function dataTableToCSV() {
var dataTable_arg = data;
var dt_cols = dataTable_arg.getNumberOfColumns();
var dt_rows = dataTable_arg.getNumberOfRows();
var csv_cols = [];
var csv_out;
for (var i=0; i<dt_cols; i++) {
csv_cols.push(dataTable_arg.getColumnLabel(i).replace(/,/g,""));
}
csv_out = csv_cols.join(",")+"\r\n";
for (i=0; i<dt_rows; i++) {
var raw_col = [];
for (var j=0; j<dt_cols; j++) {
raw_col.push(dataTable_arg.getFormattedValue(i, j, 'label').replace(/,/g,""));
}
csv_out += raw_col.join(",")+"\r\n";
}
//return csv_out;
this.downloadCSV(csv_out, fileName);
}
function downloadCSV (csv_out, fileName) {
var blob = new Blob([csv_out], {type: 'text/csv;charset=utf-8'});
var url = window.URL || window.webkitURL;
var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
link.href = url.createObjectURL(blob);
link.download = fileName+".csv";
var event = document.createEvent("MouseEvents");
event.initEvent("click", true, true);
link.dispatchEvent(event);
}
</script>我需要在所有图表相同的下拉列表和“表数据”按钮，现在我只得到第一个图表。
如果任何人有任何解决方案或想法来解决这个问题。有谁能帮我拿到这个吗？提前谢谢。
回答 1
Stack Overflow用户
发布于 2017-03-24 16:27:38
我的问题终于得到了答案。
下拉列表和表数据按钮都接受静态id，这就是为什么我只能在一个图表中获取的原因。
为了获取其他图表，我将其动态添加到dashboardLayout.jsp foreach循环中，并在dashboardLayout.jsp文件中声明的每个图表中添加参数变量。
代码片段如下：
dashboardLayout.jsp
<div class="dropdown">
<a href="#" class="dropdownhover">Export</a>
<div class="dropdown-content" id="export${theCount.count}"></div>
</div>
<a href="#" class="dropdownhover" id="tables${theCount.count}"></a>
<c:choose>
<c:when test="${chart.chartName eq 'columnbar'}">
<jsp:include page="chartsview/columnBarChart.jsp">
<jsp:param name="chartDivId" value="${chart.chartDivId}"/>
<jsp:param name="jsondata" value="${chart.merchantReportData.responseData}"/>
<jsp:param name="linkedJsonData" value="${chart.merchantReportData.responseLinkedData}"/>
<jsp:param name="xaxisLable" value="${chart.xAxisLable}"/>
<jsp:param name="yaxisLable" value="${chart.yAxisLable}"/>
<jsp:param name="exportParam" value="export${theCount.count}"/>
<jsp:param name="tablesParam" value="tables${theCount.count}"/>
</jsp:include>
<div class="portlet-content" id="${chart.chartDivId}"> ColumnBar Chart load here </div>
</c:when>
</c:choose>columnBarChart.jsp
var exportDiv = null;
var tableDiv = null;
exportDiv = "${param.exportParam}";
tableDiv = "${param.tablesParam}";
jQuery('#'+exportDiv).html('<a href="#" onclick="'+ exports1 +'">Export To PDF</a> <a href="#" onclick="'+ exports +'">Export To Image</a>');
jQuery('#'+tableDiv).html('<button class="click" style="font-family: Helvetica Neue,Helvetica,Arial,sans-serif; box-shadow: 0 0 0 0;" data-toggle="modal" data-target="#openModal" onclick="loadExportChartTable();">Table Data</button>');页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42992501
复制相关文章
相似问题
腾讯云开发者
