Question

我在一个页面上有2个谷歌图表，两个都正确显示。问题是当我将两个图表的fontName设置为'Open Sans'时，只显示一个图表。如果两个图表都有其他字体，如'Arial'，则显示两者。此外，如果一个图表的fontName为“Open Sans”而另一个图表为“Arial”，则会显示两个图表。错误仅适用于两个图表的“Open Sans”。我已经包含以下是我的代码片段。无法得到解决方案。请帮忙。在此先感谢.. !!

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

enter code here

Answer 1

尝试一次绘制一个图表，这似乎可以解决问题......

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

＆＃13;

google.load('visualization', '1.1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
  commodityChart();
}

function commodityChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Pepperoni', 33],
    ['Hawaiian', 26],
    ['Mushroom', 22],
    ['Sausage', 10],
    ['Anchovies', 9]
  ]);

  var options = {
    pieHole: 0.4,
    fontSize: 13,
    fontName: 'Open Sans',
    is3D: true,
    pieSliceText: 'value',
    sliceVisibilityThreshold: 0,
    slices: {
      0: {
        offset: 0.3
      }
    },
    legend: {
      position: 'right',
      alignment:'end'
    },
    colors: [
      '#9bc53d',
      '#FF9900'
    ],
    width: 600,
    height: 500
  };

  var chart = new google.visualization.PieChart(document.getElementById('gchart_pie_2'));
  google.visualization.events.addListener(chart, 'ready', equityChart);
  chart.draw(data, options);
}

function equityChart() {
  var data1 = new google.visualization.DataTable();
  data1.addColumn('string', 'type');
  data1.addColumn('number', 'amount');
  data1.addRows([
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ]);

  var options1 = {
    pieHole: 0.4,
    is3D: true,
    legend: {
      position: 'right',
      alignment: 'end'
    },
    fontName: 'Open Sans',
    forceIFrame: false,
    pieSliceText: 'value',
    chartArea: {
      left: 20,
      top: 20,
      width: '70%',
      height: '75%'
    },
    sliceVisibilityThreshold: 0,
    colors: [
      '#9bc53d',
      '#fde74c',
      '#e55934',
      '#5bc0eb',
      '#FF9900'
    ],
    width: 600,
    height: 500
  };

  var chart1 = new google.visualization.PieChart(document.getElementById('gchart_pie_1'));
  chart1.draw(data1, options1);
}

＆＃13;

<script src="https://www.google.com/jsapi"></script>
<div id="gchart_pie_1"></div>
<div id="gchart_pie_2"></div>

＆＃13;

一个网页上有多个Google图表

1 个答案: