如何在Google Visualization API中实现多行注释？

Question

如何在Google Visualization API中实现多行注释？

4

我正在尝试使用Google可视化API生成带注释的折线图，虽然我已经成功了，但我希望能够在注释中使用换行符。不幸的是，似乎Google的API忽略了任何换行信息，并将所有内容显示在一行上。有人找到了解决这个问题的方法吗？

这里有一个例子：

var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', 'Sales');
data.addColumn({type:'string', role:'annotation'});
data.addColumn({type:'string', role:'annotationText'});
data.addRows([
    ['April',1000, 'A', "Stolen data\nSo-so month"],
    ['May',  1170, 'B', "Coffee spill\nAnother line\nA third line"],
    ['June',  660, 'C', "Wumpus attack"]
]);

我尝试过使用\n、\\n和<br />，但它们都不起作用。

- Adam Plumb

注释不支持任何形式的换行。 - asgallant

我在下面回答了我的问题。解决方案是HTML工具提示/注释。 - Adam Plumb

5个回答

9

创建第二个注释行。

var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time');
      data.addColumn('number', 'Temp');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn({type:'string', role:'annotation'});
      data.addRows([
        [[4, 56, 00], 0, '0', 'rain'],    [[5, 56, 00], 10, '10', 'drizzle'],   [[6, 56, 00], 23, '23', 'cats'],  [[7, 56, 00], 17, '17', 'partly cloudy'],   [[8, 56, 00], 18, '18', 'sunny'],  [[9, 56, 00], 9, '9', 'sunny'],  [[10, 56, 00], 11, '9', 'sunny'], ]);

请看这个：https://jsfiddle.net/k6eocgLd/4/

- Tschäff Reisberg

1

我为您实现了一个简单的示例，以使用Google Chart实现多行注释。请复制并粘贴以下示例代码，并运行它。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', { role: 'annotation' },  'Expenses', { role: 'annotation' }],
      ['2004',  1000, 1000, 400, 400],
      ['2005',  1170,  1170, 460, 460],
      ['2006',  660,  660, 1120, 1120],
      ['2007',  1030,  1030, 540, 540]
    ]);

        var options = {
          title: 'Company Performance',
          vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

运行此代码后，您将看到以下屏幕。

enter image description here

- srbhattarai

0

正如asgallant在评论中指出的那样，您无法使用当前功能完成此操作。如果这是绝对必要的，那么您可以解析SVG以创建换行符（其功能也不稳定）。您可以查看此答案以获取有关如何在SVG中添加换行符的更多信息：

如何在javascript中换行svg文本？

- jmac

0

我发现的是，虽然不可能有多行注释，但可以制作HTML工具提示和注释：https://developers.google.com/chart/interactive/docs/customizing_tooltip_content。因此，多行注释是可能的。

- Adam Plumb

链接重定向到另一个页面。你能发布你的解决方案吗？ - rdans

我相信我链接到了正确的页面。滚动到HTML部分，你会看到如何处理它。不幸的是，我现在没有我的解决方案，但如果你说isHtml：true，那么你可以在注释字符串中放置<br>标签，它将创建新行。 - Adam Plumb

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ken Dodman · Accepted Answer

请像这样为您的工具提示添加p': {'html': true}}

data.addColumn({type:'string', role:'tooltip','p': {'html': true}});

然后在您的工具提示内容中添加<br/>