堆栈内存溢出
  简体   繁体   English

谷歌图表加载错误

[英]Google Charts Loading Error

 原文  2016-11-07 23:56:02  0   1    javascript/ google-visualization

问题描述

I recently ran into a strange issue with Google Charts and loading Google web fonts asynchronously.我最近在使用 Google Charts 和异步加载 Google Web 字体时遇到了一个奇怪的问题。 I was using loader.js and loading the most current version of the charts via google.charts.load('current', { 'packages': ['corechart'] });我正在使用loader.js并通过google.charts.load('current', { 'packages': ['corechart'] });加载最新版本的图表google.charts.load('current', { 'packages': ['corechart'] }); . . Specifically, I was trying to draw two line charts on the same page and at the same time and set their attributes as below:具体来说，我试图在同一页面上同时绘制两个折线图，并将它们的属性设置如下：

var options = {
   ...,
   ...,
   titleTextStyle: {
      ...,
      fontName: 'Lato'
   }
}

I then set some additional attributes and defined the data and proceeded to draw the charts like normal.然后我设置了一些额外的属性并定义了数据，然后像往常一样继续绘制图表。 The first chart would be drawn but the second one would never materialize.第一个图表将被绘制，但第二个图表永远不会实现。 Nothing was working so I backtracked through the code deleting chunks until I found that deleting fontName: 'Lato' is what resolved the issue.没有任何工作，所以我回溯了删除块的代码，直到我发现删除fontName: 'Lato'是解决问题的方法。 I was asynchronously loading my web fonts with this script:我用这个脚本异步加载我的网络字体：

<script type="text/javascript">
WebFontConfig = {
    google: {
        families: ['Lato:300, 400, 900']
    }
};
(function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})();
</script>

Loading my fonts while using this script, I was able to draw one chart, but when I attempted to draw two charts, I was never able to complete it.使用此脚本加载字体时，我能够绘制一张图表，但是当我尝试绘制两张图表时，我永远无法完成它。 Every time, the first chart would be populated and the second chart never loaded.每次都会填充第一个图表，而永远不会加载第二个图表。 I had defined Lato as my primary font, but I did have backups defined as well.我已经将 Lato 定义为我的主要字体，但我也定义了备份。 This didn't seem to help.这似乎没有帮助。 My final solution was to load the web font the standard way with:我的最终解决方案是以标准方式加载网络字体：

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,900" rel="stylesheet">

This resolved the issue but I don't like the idea of not being able to load the font asynchronously.这解决了问题，但我不喜欢无法异步加载字体的想法。 Has anyone run into this awkward issue before or am I just missing something really obvious?有没有人遇到过这个尴尬的问题，或者我只是错过了一些非常明显的东西？

*****EDIT***** Full chart code attached: *****编辑***** 附上完整的图表代码：

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

function drawChart() {
    var fontSizeGraph = window.getComputedStyle(document.getElementById('graph_font_size_source'), null).getPropertyValue('font-size');
    fontSizeGraph = parseFloat(fontSizeGraph);
    var interactivityPermissive = true;
    if ($(window).width() < 768) {
        interactivityPermissive = false;
    } else {
        interactivityPermissive = true;
    };
    var data = google.visualization.arrayToDataTable([
        ['Accepted Variance', 'High/Low', 'HiHi/LoLo'],
        ['0', 0, 0],
        ['1', 38, 45],
        ['2', 60, 68],
        ['3', 67, 75],
        ['4', 76, 88],
        ['5', 80, 93],
        ['6', 90, 102],
        ['7', 98, 108],
        ['8', 100, 111],
        ['9', 105, 117],
        ['10', 111, 123],
        ['11', 114, 126],
        ['12', 118, 130],
        ['13', 120, 134],
        ['14', 124, 140],
        ['15', 127, 142],
        ['16', 130, 145],
        ['16', 131, 146],
        ['18', 134, 148],
        ['19', 137, 153],
        ['20', 138, 155]
    ]);
    var options = {
        enableInteractivity: interactivityPermissive,
        title: 'Delay Tags Preserved',
        titlePosition: 'out',
        titleTextStyle: {
            color: '#3D414D',
            fontName: "Lato",
            fontSize: fontSizeGraph,
            bold: true
        },
        chartArea: {
            //top: '7%',
            width: '90%',
            height: '70%'
        },
        //chartArea: {'top': 0, 'left': 0},
        colors: ['#3D414D', '#4EDEC2'],
        curveType: 'function',
        fontName: "Lato",
        legend: {
            position: 'bottom',
            textStyle: {
                color: '#3D414D',
                fontName: "Lato"
            }
        },
        vAxis: {
            title: 'Alarm Count Reduction',
            viewWindow: {
                max: 180,
                min: -5,
                format: '#',
            },
            textStyle: {
                color: '#3D414D',
                fontName: "Lato"
            },
            showTextEvery: 20,
            textPosition: 'in',
            gridlines: {
                color: '#EFECE7',
                count: 5
            }
        },
        hAxis: {
            title: 'Accepted Variance (%)',
            titleTextStyle: {
                color: '#3D414D',
                fontName: "Lato"
            },
            viewWindow: {
                max: 24,
                min: 0,
            },
            textStyle: {
                color: '#3D414D',
                fontName: "Lato"
            },
            format: '#',
            showTextEvery: 2,
            viewWindowMode: 'maximized'
        },
        lineWidth: 2,
        tooltip: {
            textStyle: {
                color: '#3D414D',
                fontName: "Lato",
                fontSize: (fontSizeGraph * 0.5)
            },
            //isHtml: true,
            ignoreBounds: true
        },
        animation: {
            duration: 1000,
            startup: true,
            easing: 'out'
        }
    };

    var chart1 = new google.visualization.LineChart(document.getElementById('results_graph_1'));
    chart1.draw(data, options);

    var data2 = google.visualization.arrayToDataTable([
        ['Accepted Variance', 'High/Low', 'HiHi/LoLo'],
        ['0', 0, 0],
        ['1', 81, 88],
        ['2', 135, 142],
        ['3', 180, 189],
        ['4', 223, 237],
        ['5', 255, 270],
        ['6', 303, 317],
        ['7', 343, 354],
        ['8', 362, 373],
        ['9', 380, 392],
        ['10', 406, 419],
        ['11', 420, 432],
        ['12', 443, 456],
        ['13', 459, 473],
        ['14', 476, 493],
        ['15', 493, 510],
        ['16', 513, 530],
        ['16', 520, 537],
        ['18', 533, 548],
        ['19', 546, 563],
        ['20', 555, 572]
    ]);

    var options = {
        enableInteractivity: interactivityPermissive,
        title: 'Delay Tags Modified',
        titlePosition: 'out',
        titleTextStyle: {
            color: '#3D414D',
            fontName: "Lato",
            fontSize: fontSizeGraph,
            bold: true
        },
        chartArea: {
            //top: '7%',
            width: '90%',
            height: '70%'
        },
        //chartArea: {'top': 0, 'left': 0},
        colors: ['#3D414D', '#4EDEC2'],
        curveType: 'function',
        fontName: "Lato",
        legend: {
            position: 'bottom',
            textStyle: {
                color: '#3D414D',
                fontName: "Lato"
            }
        },
        vAxis: {
            title: 'Alarm Count Reduction',
            viewWindow: {
                max: 600,
                min: -5,
                format: '#',
            },
            textStyle: {
                color: '#3D414D',
                fontName: "Lato"
            },
            showTextEvery: 20,
            textPosition: 'in',
            gridlines: {
                color: '#EFECE7',
                count: 5
            }
        },
        hAxis: {
            title: 'Accepted Variance (%)',
            titleTextStyle: {
                color: '#3D414D',
                fontName: "Lato"
            },
            viewWindow: {
                max: 24,
                min: 0,
            },
            textStyle: {
                color: '#3D414D',
                fontName: "Lato"
            },
            format: '#',
            showTextEvery: 2,
            viewWindowMode: 'maximized'
        },
        lineWidth: 2,
        tooltip: {
            textStyle: {
                color: '#3D414D',
                fontName: "Lato",
                fontSize: (fontSizeGraph * 0.5)
            },
            //isHtml: true,
            ignoreBounds: true
        },
        animation: {
            duration: 1000,
            startup: true,
            easing: 'out'
        }
    };

    var chart2 = new google.visualization.LineChart(document.getElementById('results_graph_2'));
    chart2.draw(data2, options);
}

1 个解决方案

解决方案1
 0  2020-03-26 19:19:31

I ran into the same issue, having 4 charts on one page, together with async webfont loader.我遇到了同样的问题，在一页上有 4 个图表，以及异步 webfont 加载器。 Some charts randomly did not display.有些图表随机没有显示。

It seems that, if there is a font specified on chart options, on draw, code checks if there is window.WebFont object, if yes, use it to load the font(s).似乎，如果在图表选项上指定了字体，则在绘制时，代码会检查是否有window.WebFont对象，如果有，则使用它来加载字体。 Even if this font(s) is already loaded by webfont loader.即使这个字体已经被 webfont 加载器加载了。 Each chart draw call, keeps requesting the same fonts, and they keep getting appended as <link> s in <head> .每个图表绘制调用，不断请求相同的字体，并且它们不断作为<link>附加到<head> 。 This seems buggy behavior.这似乎是错误的行为。 The way i hack fixed it, is removing webfont object before calling first chart draw.我修复它的方式是在调用第一个图表绘制之前删除 webfont 对象。

google.charts.load('current', { 'packages': ['corechart'], 'callback': {
    window.WebFont = null;
    var chart1 = someChart();
    chart1.draw();
}});

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google Charts不在Intellij上加载 - Google Charts Not Loading on Intellij Google Vis和闪亮的加载图 - Google Vis and shiny loading charts 使用jQuery Mobile加载Google图表 - Loading Google Charts with jQuery Mobile 使用谷歌图表加载 gif 和动画 - Loading gif and animation with google charts 在Google图表中动态加载数据 - Dynamic data loading in Google Charts 谷歌图表甘特图错误 - Google Charts Gantt Error Google图表：日期错误 - Google Charts: Date Error 谷歌图表JavaScript错误 - Google charts javascript error 将Google表格加载到Dashboard中的Google图表 - Loading google sheets to google charts in Dashboard 谷歌图表加载多列图表的问题 - Google Charts Problem with loading multi column chart
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM