防止 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.