我正在使用Google图表显示两个图表。 一个是条形图,另一个是线形。每个图都有一个带有选项的下拉列表。 更改下拉列表中的值会重新加载相应的图形。
下拉菜单中的选项为-超级标题,尺寸,印象数。 在页面加载时,默认情况下将选择“指标”,并显示带有相关值的图形。
页面加载时,y轴上的标签不显示。但是,如果我在下拉菜单中选择一个不同的值,然后选择“ SuperTitle”,则yaxis标签会显示。
让我感到惊讶的是..在页面加载和下拉菜单中,调用了相同的函数来呈现图形。
可能是问题所在。
<div id="graphResultView3" class="divGraph3"></div>
<script type="text/javascript">
$(document).ready(function () {
google.charts.setOnLoadCallback(DrawResultView3Graph);
DrawResultView3Graph();
$(document.body).on("change", ".ddlKeyMetricColumns", function(){
$("#graphResultView3").html("");
DrawResultView3Graph();
});
});
function DrawResultView3Graph(){
var graphBarColor = "#029789";
var data = new google.visualization.DataTable();
data.addColumn("string", "value");
data.addColumn("number", $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html());
data.addColumn({type: "string", role: "style"});
if (keyMetricsJSON == null){
keyMetricsJSON = @Html.Raw(Json.Encode(Model.KeyMetrics));
}
if(keyMetricsJSON != null){
for (var i = 0; i < keyMetricsJSON.length; i++) {
var outputFacetValue = keyMetricsJSON[i].value;
switch($(".rv3Header .select-box .ddlKeyMetricColumns").val()){
case 1:
case "1":
var upto3DecimalDigits = (Number(keyMetricsJSON[i].engagementRate)).toFixed(constants.MaxDecimalDigits);
data.addRow([outputFacetValue, Number(upto3DecimalDigits), graphBarColor]);
break;
case 2:
case "2":
data.addRow([outputFacetValue, Number(keyMetricsJSON[i].uniqueActors), graphBarColor]);
break;
}
}
var options = {
legend: {position: "none"},
width: $(window).width() * 0.80,
height:constants.GraphHeight,
hAxis: {
title: $(".rv3Header .select-box .ddlKeyMetricColumns option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
},
vAxis: {
title: $(".ddlOutputTargetingFacets:first option:selected").html(),
textStyle : {
fontSize: graphValueFontSize
}
}
};
var chart = new google.visualization.BarChart(document.getElementById("graphResultView3"));
chart.draw(data, options);
}
else{
$(".divGraph3").remove();
}
}
</script>