Javascript 谷歌图表加载错误

我最近在谷歌图表和异步加载谷歌网页字体方面遇到了一个奇怪的问题。我正在使用

loader.js

并通过

google.charts.load（'current'，{'packages'：['corechart']}）加载图表的最新版本。具体来说，我试图在同一页面上同时绘制两个折线图，并将其属性设置为：

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

然后，我设置了一些附加属性，定义了数据，并继续像正常情况一样绘制图表。第一张图表会被绘制出来，但第二张图表永远不会实现。没有任何效果，所以我回溯代码删除块，直到我发现删除
fontName:“Lato”
才解决了问题。我正在使用以下脚本异步加载我的web字体：

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


WebFontConfig={
谷歌：{
家庭：['Lato:300400900']
}
};
（功能（）{
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）；
})();

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

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



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

*****编辑*****
附上完整的图表代码：

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

google.charts.load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var fontSizeGraph=window.getComputedStyle（document.getElementById（'graph\u font\u size\u source'），null）.getPropertyValue（'font-size'）；
fontSizeGraph=parseFloat（fontSizeGraph）；
var interactivitypermission=true；
如果（$（窗口）.width（）<768）{
InteractiveTyperMissive=false；
}否则{
InteractiveTyperMissive=true；
};
var data=google.visualization.arrayToDataTable([
[“接受差异”、“高/低”、“高/低”]，
['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]
]);
变量选项={
EnableInteractive:InteractiveTyperMissive，
标题：“保留延迟标记”，
标题位置：'out'，
titleTextStyle：{
颜色：“#3D414D”，
fontName:“拉托”，
fontSize:fontSizeGraph，
黑体字：对
},
图表区：{
//前几名：“7%”，
宽度：“90%”，
身高：“70%”
},
//图表区：{'top'：0'，left'：0}，
颜色：['#3D414D'，'#4EDEC2']，
curveType:'函数'，
fontName:“拉托”，
图例：{
位置：'底部'，
文本样式：{
颜色：“#3D414D”，
字体名称：“拉托”
}
},
言辞：{
标题：“减少报警计数”，
视图窗口：{
最高：180，
最小：-5，
格式：“#”，
},
文本样式：{
颜色：“#3D414D”，
字体名称：“拉托”
},
showTextEvery:20，
textPosition:'在'，
网格线：{
颜色：“#EFECE7”，
计数：5
}
},
哈克斯：{
标题：“接受差异（%）”，
titleTextStyle：{
颜色：“#3D414D”，
字体名称：“拉托”
},
视图窗口：{
最高：24，
分:0,，
},
文本样式：{
颜色：“#3D414D”，
字体名称：“拉托”
},
格式：“#”，
showTextEvery:2，
viewWindowMode:“最大化”
},
线宽：2，
工具提示：{
文本样式：{
颜色：“#3D414D”，
fontName:“拉托”，
fontSize：（fontSizeGraph*0.5）
},
//伊什特尔：没错，
无知的界限：对
},
动画：{
持续时间：1000，
是的，
放松：“退出”
}
};
var chart1=新的google.visualization.LineChart（document.getElementById（'results\u graph\u 1'）；
图表1.绘制（数据、选项）；
var data2=google.visualization.arrayToDataTable([
[“接受差异”、“高/低”、“高/低”]，
['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]
]);
变量选项={
EnableInteractive:InteractiveTyperMissive，
标题：“德
google.charts.load('current', { 'packages': ['corechart'], 'callback': {
    window.WebFont = null;
    var chart1 = someChart();
    chart1.draw();
}});