Question

我正在尝试向水平条添加注释，类似于附加图表图像中的注释。 [例如：条形'1'的注释是“7.4％（+ 2.4 / -199）”，条形图'3'是“11.7％（+ 2.9 / -2.4）”，图像中的平均垂直线条表示]

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

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

该图片摘自Google消费者调查页（http://www.google.com/insights/consumersurveys/view?survey=xirgjukonszvg&question=9&subpop&subpop）。

谢谢！

Bar Chart example

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:'#%'},
         }
        );
}

以下是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', 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专家），所以如果上述解决方法不够好，我会留给你的。

Answer 2

看看这个小提琴：http://jsfiddle.net/augustomen/FE2nh/

使用列系列成功设法将标签放在ComboChart之上。如果很少适应，您可以将标签放在栏前面，左对齐。

'魔术'部分就是这样：

/* Here comes the hack! We're going to add a svg text element to each column bar. This code will work for this data setup only. If you add/remove a series, this code must be adapted */ rects = mydiv.find('svg > g > g > g > rect'); var row = 0; for (i = 0; i < rects.length; i++) { // this selector also retrieves gridlines // we're excluding them by height el = $(rects[i]); if (parseFloat(el.attr("height")) <= 2) { continue; } aparent = el.parent(); do { // skips 'null' values text = data.getValue(row++, 1); } while (text == null && row < data.getNumberOfRows()); if (text) { text = formatter.formatValue(text); // see below pos = getElementPos(el); attrs = {x: pos.x + pos.width / 2, y: pos.y - 2, fill: 'black', 'font-family': 'Arial', 'font-size': 11, 'text-anchor': 'middle'}; aparent.append(addTextNode(attrs, text, aparent)); } } function getElementPos($el) { // returns an object with the element position return { x: parseFloat($el.attr("x")), width: parseFloat($el.attr("width")), y: parseFloat($el.attr("y")), height: parseFloat($el.attr("height")) } } function addTextNode(attrs, text, _element) { // creates an svg text node var el = document.createElementNS('http://www.w3.org/2000/svg', "text"); for (var k in attrs) { el.setAttribute(k, attrs[k]); } var textNode = document.createTextNode(text); el.appendChild(textNode); return el; }

使用Google Chart API注释栏

2 个答案: