google-visualization - 使用 Google Chart API 注释条形图

Question

我正在尝试向与附加图表图像中的注释类似的水平条添加注释。 [例如:条 '1' 的注释是“7.4% (+2.4/-.19)”，条 '3' 是“11.7% (+2.9/-2.4)”和图像中的平均垂直线表示] .

我使用了条形图并配置了它的选项来呈现条形和间隔。但是，根据 Google Charts API 文档，条形图在其角色中不支持 Annotation/AnnotationText。

我必须从 Google Chart API 中选择哪个图表？
我必须配置哪些选项来标记注释？
有没有使用 Google Chart API 解释这个问题的例子？

图片摘自谷歌消费者调查页面 ( http://www.google.com/insights/consumersurveys/view?survey=xirgjukonszvg&question=9&subpop&subpop )。

谢谢 !

Answer 1

目前无法创建在 google 可视化中显示的图表。您可以使用 DataTable Roles 创建误差线，但是 BarChart不支持注释(这意味着您不能像您发布的示例那样在图表上显示文本)。

你可以摆弄 ComboChart ，它可以支持注释，但随后您会被柱形图(而不是条形图)卡住。

这是条形图的代码:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn({type:'string', label:'label'});
  data.addColumn({type:'number', label:'value', pattern:'#.#%'});
  data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  // interval role col.
  data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  // interval role col.
  data.addColumn({type:'string', role:'annotation'}); // annotation role col. -- not enabled for bar charts
  data.addColumn({type:'string', role:'annotationText'}); // annotationText col. -- not enabled for bar charts
  data.addRows([
    ['1', 0.074, 0.055, 0.098, 'A', '7.4% (-1.9/2.4)'],
    ['2', 0.04, 0.027, 0.059, 'B', '4.0% (-1.3/1.9)'],
    ['3', 0.117, 0.093, 0.146, 'C', '11.7% (-2.4/2.9)'],
    ['4', 0.217, 0.185, 0.252, 'D', '21.7% (-3.2/3.5)'],
    ['5', 0.552, 0.511, 0.592, 'E', '55.2% (-4.1/4.0)'],
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data,
         {title:"SubPopulation B",
          width:600, height:400,
          vAxis: {title: "Importance"},
          hAxis: {title: "Percent", format:'#%'},
         }
        );
}

这是组合图表版本的代码:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn({type:'string', label:'label'});
  data.addColumn({type:'number', label:'value', pattern:'#.#%'});
  data.addColumn({type:'number', label:'line', pattern:'#.#%'});
  data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  // interval role col.
  data.addColumn({type:'number', role:'interval', pattern:'#.#%'});  // interval role col.
  data.addColumn({type:'string', role:'annotation'}); // annotation role col. -- not enabled for bar charts
  data.addColumn({type:'string', role:'annotationText'}); // annotationText col. -- not enabled for bar charts
  data.addRows([
    ['1', 0.074, 0.074, 0.055, 0.098, '7.4% (-1.9/2.4)', '7.4% (-1.9/2.4)'],
    ['2', 0.040, 0.040, 0.027, 0.059, '4.0% (-1.3/1.9)', '4.0% (-1.3/1.9)'],
    ['3', 0.117, 0.117, 0.093, 0.146, '11.7% (-2.4/2.9)', '11.7% (-2.4/2.9)'],
    ['4', 0.217, 0.217, 0.185, 0.252, '21.7% (-3.2/3.5)', '21.7% (-3.2/3.5)'],
    ['5', 0.552, 0.552, 0.511, 0.592, '55.2% (-4.1/4.0)', '55.2% (-4.1/4.0)'],
  ]);

  // Create and draw the visualization.
  var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
  ac.draw(data, {
    title : 'Subpopulation B',
    width: 600,
    height: 400,
    vAxis: {title: "Percentage", format:'#%'},
    hAxis: {title: "Importance"},
    seriesType: "bars",
    series: {1: {type: "line"}}
  });
}

您可以使用选项隐藏该行，并使其看起来更漂亮一些，但总的来说它看起来很相似(它不像您的示例那么漂亮)。

如果这些都不适合您，那么您将需要编写自定义 javascript 以将工具提示(注释)添加到 BarChart手动。我不知道如何(因为我不是 javascript 专家)，所以如果上述解决方法不够好，我会把它留给你。