Я использую диаграммы Google, чтобы показать два графика.
Один представляет собой гистограмму, а другой - линию. У каждого графика есть выпадающий список с опциями.
Изменение значения в раскрывающемся списке перезагрузит график с соответствующими значениями.
Параметры в раскрывающемся списке - SuperTitle, размеры, впечатления.
При загрузке страницы по умолчанию будет выбран «Метрики», и отобразится график со связанными значениями.
При загрузке страницы ярлыки на оси не отображаются. Однако, если я выберу другое значение в раскрывающемся списке, а затем "SuperTitle", появятся метки яксиса.
Что меня удивляет ... при загрузке страницы и выпадающем меню вызывается та же функция, которая отображает график.
В чем может быть проблема.
<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>