Question

我正在使用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>

Google图表未显示yaxis标签

0 个答案: