首页 文章

如何动态添加新的图表类型到谷歌烛台图表

提问于
浏览
1

这篇文章展示了如何添加相同的图表类型(行)How to add another data series to a Google chart

这一个不是真正的烛台图Candlesticks is always on top of lines in combo chart google chart

真烛台不是组合https://developers.google.com/chart/interactive/docs/gallery/candlestickchart

那么可以在真正的烛台谷歌图表中添加一条线和/或条形图吗?

1 回答

  • 1

    使用 series 选项更改类型...

    四个烛台列将被视为系列#:0

    请参阅以下工作代码段...

    google.charts.load('current', {
      packages: ['corechart']
    }).then(function () {
      var data = google.visualization.arrayToDataTable([
        ['Day', 'Candlestick', 'Begin', 'End', 'High'],
        ['Mon', 20, 28, 38, 45],
        ['Tue', 31, 38, 55, 66],
        ['Wed', 50, 55, 77, 80],
        ['Thu', 77, 77, 66, 50],
        ['Fri', 68, 66, 22, 15]
      ]);
    
      // add column for line, add data to rows...
      var colIndex = data.addColumn('number', 'Line');
      for (var i = 0; i < data.getNumberOfRows(); i++) {
        data.setValue(i, colIndex, data.getValue(i, 1));
      }
    
      var options = {
        height: 400,
        series: {
          1: {
            type: 'line'
          }
        }
      };
    
      var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    });
    
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <div id="chart_div"></div>
    

相关问题