Google Bar Intervals Chart选项-Java 学习之路

我创建了一个谷歌行间隔图表 . 这里提供了一个google提供的示例https://jsfiddle.net/4tgfzdyj/我正在尝试将其转换为Bar Intervals图表，这里给出了一些解释和var选项：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',
    };

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>

回复于 2024-05-13T18:29:59+08:00

Google Bar Intervals Chart选项

1 回答

相关问题