防止 Google 图表在图表标题中转义撇号
[英]Prevent Google Charts from escaping apostrophes in a title of a chart
问题描述
我正在使用谷歌条形图https://developers.google.com/chart/interactive/docs/gallery/barchart 。 的标题存储在数据库中，其中一些包含撇号。 标题中的撇号呈现为&39 ，例如“he's”--->“he&39s”
我希望撇号正常呈现。
我找到了几个解决方案，但到目前为止，没有一个解决方案能够完成如此简单的任务。
任何有效的解决方案？
更新：
这是正确呈现的，因为I'm goooood
var chart = new google.visualization.ColumnChart(document.getElementById("my_div"));
chart.draw(data, {
title: "I'm goooood",
legend: {position: "none"},
});
但这 - 不是，是 ---> I'm goooood
var chart = new google.visualization.ColumnChart(document.getElementById("my_div"));
chart.draw(data, {
title: "<%= get_value_from_db() %>",
legend: {position: "none"},
});"
在其他页面上，没有图表而只有文本，“<%= get_value_from_db() %>”被正确呈现—— I'm goooood 。
4 个解决方案
解决方案1
1 2018-07-05 03:23:54
我遇到了同样的问题，但只有 ' 和 " 呈现为 "&39," 或 "&34," 。
由于上述修复均不适合我，因此我依赖的一个快速且相当脏的解决方案是使用 string.replace 与素数 ( ′ ) 和双素数 ( ″ ) 符号 - 循环合理的次数。
<%= varName.replace("\'",'′').replace("\"",'″ ') %>
此外，我认为此错误可能与 Google Charts 和 EJS 如何一起交互有关，因为 OP 和我都在使用它并遇到此问题。 （纯属猜测）
解决方案2
0 2017-10-10 05:57:28
使用 \\ 转义 '。 看例子
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company\\'Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="barchart_material" style="width: 900px; height: 500px;"></div> </body> </html>
解决方案3
0 2017-10-10 11:30:14
您可以使用 dom 元素将 ascii 字符转换为可读文本
function convertToText(ascii) {
var tempDiv = document.createElement('DIV');
tempDiv.innerHTML = ascii;
return tempDiv.textContent || tempDiv.innerText || '';
}
在你的选择...
chart.draw(data, {
title: convertToText("<%= get_value_from_db() %>"),
legend: {position: "none"},
});
请参阅以下工作片段...
google.charts.load('current', { packages: ['corechart'] }).then(function () { var data = google.visualization.arrayToDataTable([ ['x', 'y'], ['A', 9], ['B', 30], ['C', 50], ['D', 70], ['E', 90] ]); var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(data, { title: convertToText('I'm goooood'), legend: {position: 'none'}, }); function convertToText(ascii) { var tempDiv = document.createElement('DIV'); tempDiv.innerHTML = ascii; return tempDiv.textContent || tempDiv.innerText || ''; } });
<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
解决方案4
0 2018-04-07 11:28:04
只需在文本上使用 decodeURI。 我的标题来自用户从类别中选择的内容。 所以，当我显示图表标题时，我喜欢这样：
标题：decodeURI(strCategory) + ' from ' + decodeURI(strInitialDate) + ' to ' + decodeURI(strEndDate)
我的类别包括“Alimentação”、“Feira/Sacolão”等……它甚至适用于智能手机。
希望能帮助到你！
添加：也适用于警报... alert('Sem dados para o período de: ' + decodeURI(strInitialDate) + ' a ' + decodeURI(strEndDate))
Google Charts：饼图标题位置
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.