如何在Google可视化API中使用多行注释？

我试图使用谷歌可视化API生成一个带注释的LineChart，虽然我有它的工作，我希望能够有批注如果可能的话换行符。不幸的是，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, and <br />和那些不工作。

来源

2013-11-25 Adam Plumb

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

我在下面回答了我的问题。解决方案是html工具提示/注释。 –

你不能用当前的功能做这件事，asgallant在评论中指出。如果这是绝对必要的，那么你可以通过SVG解析来创建换行符（它也具有斑点功能）。你可以看到这个答案的详细信息，如何在SVG添加换行符：

How to linebreak an svg text within javascript?

来源

2013-11-26 05:17:43 jmac

什么我发现是，虽然它是不可能有多行注释，可以使HTML工具提示和注释：https://developers.google.com/chart/interactive/docs/customizing_tooltip_content。所以有可能有多行注释。

来源

2013-11-26 15:27:45

链接重定向到不同的页面。你能发布你的解决方案吗？ – rdans

我相信我链接到了正确的页面。滚动到HTML部分，您会看到如何处理它。不幸的是，我不再需要我的解决方案，但是如果您说isHtml：true，那么您可以将
标签放入注释字符串中，它将创建新行。 –

我已经实现了一个简单的例子，为您实现使用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

来源

2015-01-27 07:31:58 srbhattarai

这样

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

那么你的附加<br/>添加p': {'html': true}}你提示你的提示内容

来源

2015-04-14 22:08:03

这实际上是答案，我不明白你为什么没有获得更多的成功。不管怎么说，还是要谢谢你！ – Dici

创建第二个注释行。

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/

来源

2016-04-12 15:16:47

如何在Google可视化API中使用多行注释？

回答

相关问题