Question

我已经创建了一个Google线间隔图。可以在此处查看Google提供的示例https://jsfiddle.net/4tgfzdyj/，我正在尝试将其转换为条形区间图，此处给出了一些说明和变量选项：https://developers.google.com/chart/interactive/docs/gallery/intervals

但是，即使使用Google提供的示例，我也无法做到，但是我无法获得链接图片中给出的结果。当我更改条形间隔图的var选项时，将显示一个空白页。不幸的是，Google没有为此提供完整的工作代码或jsfiddle。而且我做不到。我可能缺少什么？一点帮助表示赞赏。谢谢。

  var options_bars = {
        title: 'Bars, default',
        curveType: 'function',
        series: [{'color': '#D9544C'}],
        intervals: { style: 'bars' },
        legend: 'none',
    };

Answer 1

以下是从提琴提供的行间隔的有效片段...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'values');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});

  data.addRows([
      [1, 100, 90, 110, 85, 96, 104, 120],
      [2, 120, 95, 130, 90, 113, 124, 140],
      [3, 130, 105, 140, 100, 117, 133, 139],
      [4, 90, 85, 95, 85, 88, 92, 95],
      [5, 70, 74, 63, 67, 69, 70, 72],
      [6, 30, 39, 22, 21, 28, 34, 40],
      [7, 80, 77, 83, 70, 77, 85, 90],
      [8, 100, 90, 110, 85, 95, 102, 110]]);

  // The intervals data as narrow lines (useful for showing raw source data)
  var options_lines = {
      title: 'Line intervals, default',
      curveType: 'function',
      lineWidth: 4,
      intervals: { 'style':'line' },
      legend: 'none'
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
  chart_lines.draw(data, options_lines);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>

如果要更改为条形，请使用以下选项

var options_bars = {
    title: 'Bars, default',
    curveType: 'function',
    series: [{'color': '#D9544C'}],
    intervals: { style: 'bars' },
    legend: 'none',
};

然后，您还需要更改draw语句，
因为新选项的变量名称不同...

来自...

  chart_lines.draw(data, options_lines);

到...

  chart_lines.draw(data, options_bars);

请参阅以下工作片段...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'x');
  data.addColumn('number', 'values');
  data.addColumn({id:'i0', type:'number', role:'interval'});
  data.addColumn({id:'i1', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});
  data.addColumn({id:'i2', type:'number', role:'interval'});

  data.addRows([
      [1, 100, 90, 110, 85, 96, 104, 120],
      [2, 120, 95, 130, 90, 113, 124, 140],
      [3, 130, 105, 140, 100, 117, 133, 139],
      [4, 90, 85, 95, 85, 88, 92, 95],
      [5, 70, 74, 63, 67, 69, 70, 72],
      [6, 30, 39, 22, 21, 28, 34, 40],
      [7, 80, 77, 83, 70, 77, 85, 90],
      [8, 100, 90, 110, 85, 95, 102, 110]]);

  // The intervals data as narrow lines (useful for showing raw source data)
  var options_bars = {
      title: 'Bars, default',
      curveType: 'function',
      series: [{'color': '#D9544C'}],
      intervals: { style: 'bars' },
      legend: 'none',
  };

  var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines'));
  chart_lines.draw(data, options_bars);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>

Google条形区间图表选项

1 个答案: