Google диаграммы не показывают ярлыки яксиса - PullRequest
0 голосов
/ 02 января 2019

Я использую диаграммы 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>

enter image description here enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...