简体   繁体   中英

Google Charts - Combo Chart Example Issue

This is probably a simple fix, but I can't see what is going wrong. I am trying to use a bit of code from Candlesticks is always on top of lines in combo chart google chart and https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart . I have tried placing it in my html code (this works for other examples) but its not working in this case. Just wondering if you can help me debug it.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawVisualization);



function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Day');
  data.addColumn('number', 'Dummy');
  data.addColumn('number', 'Range');
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn('number', 'Trend');
  data.addRows([
    ['Mon', 28, 10, -8, 17, 42.8],
    ['Tue', 38, 17, -7, 28, 47.5],
    ['Wed', 55, 22, -5, 25, 52.2],
    ['Thu', 66, 11, -16, 11, 56.9],
    ['Fri', 22, 44, -7, 44, 61.6],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Monthly Coffee Production by Country',
    width: 600,
    height: 400,
    vAxis: {title: "Cups"},
    hAxis: {title: "Month"},
    isStacked: true,
    seriesType: "bars",
    series: {0: {color: 'transparent'}, 2: {type: "line"}}
  });
}



    </script>
  </head>
  <body>
  </body>
</html>

Your HTML body doesn't contain an element called visualization - this is where the chart is inserted in the below line:

var ac = new google.visualization.ComboChart(document.getElementById('visualization'));

Here's a fiddle: http://jsfiddle.net/s2nya2Lv/

Does this solve your problem, or is there another problem? Your question doesn't clearly explain what exactly the problem is.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM