如何修复重叠的Google Chart图例 [英] How to fix overlapping Google Chart legend

查看：146
本文介绍了如何修复重叠的Google Chart图例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这一直是我已经工作了几个小时，我似乎无法找到可行的解决方案。我有一个页面（ASP.NET核心），它有引导标签。每个选项卡显示不同的图表。我已经阅读了各种答案，并尝试了很多来自这个网站和其他网站的不同的东西，但我确信我做错了什么。



这是一个概念证明页面我正在做，从我的理解，我需要拖延加载的图表，直到选择 nav-tab 。这是我不知道该怎么做的。



我的看法：

 < HTML> 
< head> 
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css/> 
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js>< / script> 
< script type =text / javascriptsrc =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script> 
 
 
 <！ - 加载AJAX API  - > 
< script type =text / javascriptsrc =https://www.gstatic.com/charts/loader.js>< / script> 
 
 @ Html.Partial（〜/ Views / Shared / Chart_ByMonth.cshtml）
 @ Html.Partial（〜/ Views / Shared / Chart_ByMonthAndQuarter.cshtml）
 @ Html.Partial（〜/ Views / Shared / Chart_ByLeaseAdmin.cshtml）
 @ Html.Partial（〜/ Views / Shared / Chart_Fourth.cshtml）
 
< script type = 文本/ JavaScript的 > 
 //加载Visualization API和corechart软件包。 
 google.charts.load（'current'，{'packages'：['corechart']}）; 
 
 //设置回调以在加载Google Visualization API时运行。 
 google.charts.setOnLoadCallback（drawMonthChart）; 
 google.charts.setOnLoadCallback（drawMonthAndQuarterChart）; 
 google.charts.setOnLoadCallback（drawLeaseAdminChart）; 
 google.charts.setOnLoadCallback（drawFourthChart）; 
< / script> 
  

 <身体GT; 
< ul class =nav nav-tabsid =tabs> 
< li class =activeid =tab_1>< a data-toggle =tabhref =＃home>按月份< / a>< / li> 
< li id =tab_2>< a data-toggle =tabhref =＃menu1>按Month&季度< / A>< /锂> 
< li id =tab_3>< a data-toggle =tabhref =＃menu2> By Lease Admin< / a>< / li> 
< li id =tab_4>< a data-toggle =tabhref =＃menu3>第四张图< / a>< / li> 
< / ul> 
< div class =tab-content> 
< div id =homeclass =tab-pane fade in active> 
< h3>按月份< / h3> 
< select> 
< option selected> January< / option> 
< option> February< / option> 
< option> March< / option> 
< option> April< / option> 
< / option> May< / option> 
< option> June< / option> 
< option> July< / option> 
< option> August< / option> 
< option> September< / option> 
< option> October< / option> 
< option> November< / option> 
< option> December< / option> 
< / select> 
< select> 
< option> 2016< / option> 
< option> 2017< / option> 
< / select> 
< button type =submitclass =btn btn-success>提交< / button> 
< div id =chart_month_divstyle =padding-top：20px;>< / div> 
< / div> 
 ..... 
< / div> 
< / body>

该图表的局部视图只是硬编码数据，也是概念证明页面：

 < script type =text / javascript> 
 
 
函数drawMonthAndQuarterChart（）{
 
 //创建数据表。 
 var data = google.visualization.arrayToDataTable（[
 ['Type'，'Cash'，'Credit'，{role：'annotation'}]，
 ['January'，10 ，24，'']，
 ['February'，16，22，'']，
 ['March'，28，19，''] 
]）; 
 
 //设置图表选项
 var options = {
 width：1200，
 height：400，
 legend：{position：'top'， maxLines：3}，
 bar：{groupWidth：'75％'}，
 isStacked：true，
 
 hAxis：{
 minValue：0，
标题：本月批准和季度'
} 
 
}; 
 
 
 //实例化并绘制我们的图表，并传入一些选项。 
 var chartMonthandquarter = new google.visualization.BarChart（document.getElementById（'chart_monthandquarter_div'））; 
 chartMonthandquarter.draw（data，options）;



图表全部加载罚款时选项卡被选中。除了最初显示的图表外，图例与自身重叠。我试过默认图表div被隐藏，并且每个选项卡都有一个覆盖样式的onclick事件，我尝试了一些事件，其中一个选项卡处于活动状态，没有任何东西似乎可以工作，我只是一直在对我的头撞击



我怀疑这跟我打电话的事实有关。

  google.charts.setOnLoadCallback（drawMonthAndQuarterChart）; 
 google.charts.setOnLoadCallback（drawLeaseAdminChart）; 
 google.charts.setOnLoadCallback（drawFourthChart）;

并且由于图表已经在创建页面时被正确绘制，因此无法重新绘制它们。我不知道该怎么做才能成功获取图表，以便只在新选项卡处于活动状态或类似情况时才绘制。 解决方案

因为你已经收集了，

，问题是在隐藏标签时绘制图表的结果



需要等到标签页显示第一次绘制之前显示



这样，只使用回调绘制第一个图表... 

  google.charts.load（'current'，{'packages'：['corechart']}）; 
 google.charts.setOnLoadCallback（drawMonthChart）;

一旦回调触发，您不必再次调用它，

可以根据需要绘制多少图表然后在绘制下一张图表之前等待标签被点击......


b $ b

在这里，在href属性上使用switch语句，

来确定哪个tab被点击，

然后绘制它的图表...

（'shown.bs.tab'，函数（e））中的

  $（'a [data-toggle =tab {
 switch（$（e.target）.attr（'href'））{
 case'#home'：
 drawMonthChart（）; 
 break; 
 
 case'＃menu1'：
 drawMonthAndQuarterChart（）; 
 break; 
 
 case'＃menu2'：
 drawLeaseAdminChart（）; 
 break; 
 
 case'＃menu3'：
 drawFourthChart（）; 
 break; 
} 
}）;


This has been something I've been working on for hours now and I can't seem to find a solution that works. I have a page (ASP.NET Core) that has bootstrap tabs on it. Each tab displays a different chart. I've read various answers and tried so many different things from this and other sites but I'm sure what I'm doing wrong.

This is a proof of concept page I'm making and from what I understand I need to stall the loading of the chart until the nav-tab is selected. That is what I am unsure of how to do.

My View:

<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

@Html.Partial("~/Views/Shared/Chart_ByMonth.cshtml")
@Html.Partial("~/Views/Shared/Chart_ByMonthAndQuarter.cshtml")
@Html.Partial("~/Views/Shared/Chart_ByLeaseAdmin.cshtml")
@Html.Partial("~/Views/Shared/Chart_Fourth.cshtml")

<script type="text/javascript">
    // Load the Visualization API and the corechart package.
    google.charts.load('current', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawMonthChart);
    google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
    google.charts.setOnLoadCallback(drawLeaseAdminChart);
    google.charts.setOnLoadCallback(drawFourthChart);
</script>


<body>
<ul class="nav nav-tabs" id="tabs">
        <li class="active" id="tab_1"><a data-toggle="tab" href="#home">By Month</a></li>
        <li id="tab_2"><a data-toggle="tab" href="#menu1">By Month & Quarter</a></li>
        <li id="tab_3"><a data-toggle="tab" href="#menu2">By Lease Admin</a></li>
        <li id="tab_4"><a data-toggle="tab" href="#menu3">Fourth Chart</a></li>
    </ul>
    <div class="tab-content">
        <div id="home" class="tab-pane fade in active">
            <h3>By Month</h3>
            <select>
                <option selected>January</option>
                <option>February</option>
                <option>March</option>
                <option>April</option>
                <option>May</option>
                <option>June</option>
                <option>July</option>
                <option>August</option>
                <option>September</option>
                <option>October</option>
                <option>November</option>
                <option>December</option>
            </select>
            <select>
                <option>2016</option>
                <option>2017</option>
            </select>
            <button type="submit" class="btn btn-success">Submit</button>
            <div id="chart_month_div" style="padding-top: 20px;"></div>
        </div>
.....
</div>
</body>

The partial view for that chart is just hard-coded data, again a proof of concept page:

<script type="text/javascript">


function drawMonthAndQuarterChart() {

    // Create the data table.
    var data = google.visualization.arrayToDataTable([
        ['Type', 'Cash', 'Credit', { role: 'annotation' }],
        ['January', 10, 24, ''],
        ['February', 16, 22, ''],
        ['March', 28, 19, '']
    ]);

    // Set chart options
    var options = {
        width: 1200,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,

        hAxis: {
            minValue: 0,
            title: 'Approvals for the month & quarter'
        }

    };


    // Instantiate and draw our chart, passing in some options.
    var chartMonthandquarter = new google.visualization.BarChart(document.getElementById('chart_monthandquarter_div'));
    chartMonthandquarter.draw(data, options);
}

The charts all load fine when tabs are selected. The legend is overlapped with itself on all but the initially shown chart. I've tried defaulting the chart divs to be hidden and having an onclick event for each tab that overrides the styling, I've tried doing events where a tab is active, nothing seems to work and I've just been banging my head against the wall.

I suspect it has something to do with the fact that I'm calling

google.charts.setOnLoadCallback(drawMonthAndQuarterChart);
google.charts.setOnLoadCallback(drawLeaseAdminChart);
google.charts.setOnLoadCallback(drawFourthChart);

and since the charts are already drawn right on page creation, there's no way to redraw them. What I am not sure how to do is successfully get the charts to draw only when a new tab is active or something similar.

解决方案

as you've gathered,
the problem is a result of drawing the chart while the tab is hidden

need to wait until the tab is shown before drawing for the first time

as such, only draw the first chart using the callback... 

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawMonthChart);

once the callback fires, you don't have to call it again,
you can draw as many charts as needed afterwards

then wait for the tabs to be clicked before drawing the next chart...

here, a switch statement is used on the href attribute,
to determine which tab was clicked,
then draw its chart... 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    switch ($(e.target).attr('href')) {
      case '#home':
        drawMonthChart();
        break;

      case '#menu1':
        drawMonthAndQuarterChart();
        break;

      case '#menu2':
        drawLeaseAdminChart();
        break;

      case '#menu3':
        drawFourthChart();
        break;
    }
});

这篇关于如何修复重叠的Google Chart图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆