Google visualization 一个网页上有多个谷歌图表

我在一个页面上有两个谷歌图表，两个都显示正确。问题是，当我将两个图表的fontName设置为“打开SAN”时，只显示一个图表。如果两个图表都有其他字体，如“Arial”，则都会显示。此外，如果一个图表的fontName为“Open Sans”，另一个图表的fontName为“Arial”，则两个图表都会显示。错误仅适用于两个图表的“开放SAN”。下面是我的代码片段。无法找到解决方案。请帮忙。提前谢谢

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

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart() {

    // Create the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
        for($i=0;$i<count($data);$i++){
          if($data[$i]->SEGMENT == 'COMMODITY'){
          echo "['" . $data[$i]->PARAMETER . "'," . $data[$i]->AMOUNT . "],";
      }
    }

?>
    ]);

     var formatter = new google.visualization.NumberFormat({prefix: '₹', format:'##,##,###.00'} );
    formatter.format(data, 1);
    // Set chart options
    var options = {pieHole: 0.4,
       fontSize: 13,
      fontName: 'Open Sans', 
      is3D : true,
      pieSliceText: 'value',
      sliceVisibilityThreshold: 0,
     // pieStartAngle: 100,
      slices: {0: {offset: 0.3}},
      //fontName: 'Open Sans',
       legend: {position: 'right', alignment:'end'},
       colors: ['#9bc53d', '#FF9900'],
                   'width':600,
                 //  chartArea:{left:30,top:20,width:'70%',height:'75%'},
                   'height':500};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('gchart_pie_2'));
    chart.draw(data, options);
  }
}
</script>

<script type="text/javascript">
 function equityChart(){

  // Load the Visualization API and the piechart package.
  google.load('visualization', '1.1', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.setOnLoadCallback(drawChart1);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart1() {

    // Create the data table.
    var data1 = new google.visualization.DataTable();
    data1.addColumn('string', 'type');
    data1.addColumn('number', 'amount');
    //data.addColumn({type: 'string', role: 'tooltip'});

    data1.addRows([
              <?
        for($i=0;$i<count($data);$i++){
          if($data[$i]->SEGMENT == 'EQUITY'){
          echo "['" . $data[$i]->PARAMETER . "'," . $data[$i]->AMOUNT . "],";
      }
    }
?>
    ]);

     var formatter = new google.visualization.NumberFormat({prefix: '₹', format:'##,##,###.00'} );
    formatter.format(data1, 1);

    // Set chart options
    var options1 = {pieHole: 0.4,
     is3D: true,`enter code here`
      legend: {position: 'right', alignment:'end'},
       //fontSize: 13,
       fontName: 'Open Sans',
       forceIFrame: false,
      // pieSliceBorderColor: 'red',
       pieSliceText: 'value',
       //pieSliceTextStyle: {fontName: 'Open Sans', fontSize: 13},
       chartArea:{left:20,top:20,width:'70%',height:'75%'},
      // pieStartAngle: 20,
     // slices: {0: {offset: 0.4}},
       sliceVisibilityThreshold: 0,
       // colors: ['#5bc0eb','#fde74c', '#9bc53d', '#e55934', '#fa7921'],
        colors: ['#9bc53d','#fde74c', '#e55934', '#5bc0eb', '#FF9900'],
        //tooltip: {isHtml: true},
                   'width':600,
                   'height':500};

    // Instantiate and draw our chart, passing in some options.
    var chart1 = new google.visualization.PieChart(document.getElementById('gchart_pie_1'));
    chart1.draw(data1, options1);
  }
}

功能commodityChart（）{
//加载可视化API和piechart包。
load（'visualization'，'1.1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数绘图图（）{
//创建数据表。
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
data.addRows([
对于（$i=0；$iSEGMENT==‘商品’）{
echo“['”$data[$i]->PARAMETER.”，“$data[$i]->AMOUNT.”，“；
}
}
?>
]);
var formatter=new google.visualization.NumberFormat（{前缀：'₹', 格式：'##,##,##,###.00'}）；
格式化程序。格式化（数据，1）；
//设置图表选项
var options={pieHole:0.4，
尺寸：13，
fontName:“打开SAN”，
is3D：是的，
文本：“值”，
切片可见性阈值：0，
//皮斯塔坦格尔：100，
切片：{0:{offset:0.3}}，
//fontName:“打开SAN”，
图例：{位置：'right'，对齐：'end'}，
颜色：['#9bc53d'，'#FF9900']，
“宽度”：600，
//图表区：{左：30，上：20，宽：70%，高：75%}，
‘高度’：500}；
//实例化并绘制图表，传入一些选项。
var chart=new google.visualization.PieChart（document.getElementById（'gchart\u pie\u 2'）；
图表绘制（数据、选项）；
}
}
函数equityChart（）{
//加载可视化API和piechart包。
load（'visualization'，'1.1'，{'packages'：['corechart']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawChart1）；
//创建并填充数据表的回调，
//实例化饼图，传入数据并
//画它。
函数drawChart1（）{
//创建数据表。
var data1=新的google.visualization.DataTable（）；
data1.addColumn（'string'，'type'）；
数据1.addColumn（'number'，'amount'）；
//addColumn（{type:'string'，role:'tooltip'}）；
data1.addRows([
试着一次画一张图表，这似乎可以解决问题

在这里，我使用
ready
事件等待绘制第一个图表，然后绘制第二个图表


google.load（'visualization'，'1.1'，{'packages'：['corechart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
commodityChart（）；
}
功能commodityChart（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
data.addRows([
[辣味香肠，33]，
[‘夏威夷’，26]，
[‘蘑菇’，22]，
[‘香肠’，10]，
[‘凤尾鱼’，9]
]);
变量选项={
pieHole:0.4，
尺寸：13，
fontName:“打开SAN”，
is3D：是的，
文本：“值”，
切片可见性阈值：0，
切片：{
0: {
偏移量：0.3
}
},
图例：{
位置：'右'，
对齐：“结束”
},
颜色：[
#9bc53d"，
“#FF9900”
],
宽度：600，
身高：500
};
var chart=new google.visualization.PieChart（document.getElementById（'gchart\u pie\u 2'）；
google.visualization.events.addListener（图表'ready'，equityChart）；
图表绘制（数据、选项）；
}
函数equityChart（）{
var data1=新的google.visualization.DataTable（）；
data1.addColumn（'string'，'type'）；
数据1.addColumn（'number'，'amount'）；
data1.addRows([
[Work'，11]，
[Eat'，2]，
[‘通勤’，2]，
[“看电视”，2]，
[Sleep'，7]
]);
变量选项1={
pieHole:0.4，
is3D：是的，
图例：{
位置：'右'，
对齐：“结束”
},
fontName:“打开SAN”，
forceIFrame:false，
文本：“值”，
图表区：{
左:20,，
前20名，
宽度：“70%”，
身高：75%
},
切片可见性阈值：0，
颜色：[
#9bc53d"，
"fde74c",，
"e55934",，
#5bc0eb"，
“#FF9900”
],
宽度：600，
身高：500
};
var chart1=新的google.visualization.PieChart（document.getElementById（'gchart_pie_1'）；
图表1.绘图（数据1，选项1）；
}
尝试一次绘制一个图表，这似乎可以解决问题

在这里，我使用
ready
事件等待绘制第一个图表，然后绘制第二个图表


google.load（'visualization'，'1.1'，{'packages'：['corechart']}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
commodityChart（）；
}
功能commodityChart（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Topping'）；
data.addColumn（'number'，'Slices'）；
data.addRows([
[辣味香肠，33]，
[‘夏威夷’，26]，
[‘蘑菇’，22]，
[‘香肠’，10]，
[‘凤尾鱼’，9]
]);
变量选项={
pieHole:0.4，
尺寸：13，
fontName:“打开SAN”，
is3D：是的，
文本：“值”，
切片可见性阈值：0，
切片：{
0: {
偏移量：0.3
}
},
图例：{
位置：'右'，
对齐：“结束”
},
颜色：[
#9bc53d"，
“#FF9900”
],
宽度：600，
身高：500
};
var chart=new google.visualization.PieChart（document.getElementById（'gchart\u pie\u 2'）；