4

我想使用 Google Charts API，但他们似乎不支持这一点（至少公开）。

这就是我想要复制的内容（用于内部报告）：截图

编辑：这是我发现的最接近的东西：https ://developers.google.com/chart/interactive/docs/reference#barformatter

4

1 回答 1

2

没有简单的方法可以做完全相同的事情，但是您可以稍微作弊并获得类似的东西（您可以根据需要进行自定义以进行进一步的微调）：

样本

基本上，我制作了一个包含 6 个不同系列的堆叠条形图。

  1. 假人（透明）系列
  2. 黑线（因此错误栏正确显示）
  3. （和 4、5、6）灰色、红色、黄色、绿色的范围

虚拟系列是透明的，并设置第一个条出现在图表上多远。黑线系列始终为 0，并且上面有从 0 到 100 的误差线（下面的间隔列）。其他代表数据。

手动操作有点复杂，但是您可以创建一个 javascript 函数来将数字适当地分配给给定单个值的各种系列。我只是输入任意值。

颜色和透明度可以优化，每个条的“高度”也可以优化，使其看起来相似。轴基线和网格线可以隐藏以使其看起来更好。图例也可以隐藏。我没有做那些计算你无论如何都会摆弄代码的事情。

这是代码：

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Label');
  data.addColumn('number', 'Dummy');
  data.addColumn('number', 'Black for Lines');
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn({type: 'number', role: 'interval'});
  data.addColumn('number', 'Grey');
  data.addColumn('number', 'Red');
  data.addColumn('number', 'Yellow');
  data.addColumn('number', 'Green');
  data.addRows([
    ['Target', 65, 0, 0, 100, 15, 00, 00, 00],
    ['Test A', 85, 0, 0, 100, 00, 00, 00, 15],
    ['Test B', 70, 0, 0, 100, 10, 00, 05, 00],
    ['Test C', 10, 0, 0, 100, 00, 15, 00, 00],
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {isStacked: true,           
            width:600, height:400,
            series: [{color: 'transparent'}, {color: 'black'}, {color: 'grey'}, {color: 'red'}, {color: 'yellow'}, {color: 'green'}]
           }
      );
}
于 2013-05-21T04:23:36.100 回答