Question

我最近遇到了谷歌图表的一个奇怪问题，并异步加载谷歌网页字体。我正在使用loader.js并通过google.charts.load('current', { 'packages': ['corechart'] });加载最新版本的图表。具体来说，我试图在同一页面上同时绘制两个折线图并设置其属性如下：

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

然后我设置了一些额外的属性并定义了数据并继续像平常那样绘制图表。将绘制第一张图表，但第二张图表永远不会实现。没有任何工作，所以我通过代码删除块回溯，直到我发现删除fontName: 'Lato'是解决问题的原因。我用这个脚本异步加载我的网络字体：

<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>

在使用此脚本时加载我的字体，我能够绘制一个图表，但是当我尝试绘制两个图表时，我无法完成它。每次都会填充第一个图表，并且永远不会加载第二个图表。我已经将Lato定义为我的主要字体，但我确实也定义了备份。这似乎没有帮助。我的最终解决方案是以标准方式加载Web字体：

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

这解决了这个问题，但我不喜欢不能异步加载字体的想法。有没有人遇到过这个尴尬的问题，或者我只是遗漏了一些非常明显的东西？

***** EDIT ***** 附上完整的图表代码：

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);
}

Answer 1

我遇到了同样的问题，一页上有4个图表，以及一个异步webfont加载器。某些图表随机未显示。

似乎，如果图表选项上指定了字体，则在绘制时，代码将检查是否存在window.WebFont对象，如果是，则使用它来加载字体。即使此字体已经由webfont loader加载。每个图表绘制调用均不断要求使用相同的字体，并且它们会不断在<link>中作为<head>附加。这似乎是越野车的行为。我破解的方式是在调用第一个图表绘制之前删除webfont对象。

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

Google图表加载错误

1 个答案: