防止 Google 图表在图表标题中转义撇号

Question

I'm using google Bar Charts https://developers.google.com/chart/interactive/docs/gallery/barchart .我正在使用谷歌条形图https://developers.google.com/chart/interactive/docs/gallery/barchart 。 The titles for are stored in a database and some them contain apostrophes.的标题存储在数据库中，其中一些包含撇号。 Those apostrophes in the title are rendered as &39 , for example "he's" ---> "he&39s"标题中的撇号呈现为&39 ，例如“he's”--->“he&39s”

I want apostrophes to be rendered normally.我希望撇号正常呈现。

I've found several solutions but none of them worked so far for such a simple task.我找到了几个解决方案，但到目前为止，没有一个解决方案能够完成如此简单的任务。

Any working solution?任何有效的解决方案？

update:更新：

This is rendered properly, as I'm goooood这是正确呈现的，因为I'm goooood

  var chart = new google.visualization.ColumnChart(document.getElementById("my_div"));
  chart.draw(data, {
    title: "I'm goooood",
    legend: {position: "none"},
  });

But this - not, it's ---> I'm goooood但这 - 不是，是 ---> I'm goooood

  var chart = new google.visualization.ColumnChart(document.getElementById("my_div"));
  chart.draw(data, {
    title: "<%= get_value_from_db() %>",
    legend: {position: "none"},
  });"

On other pages, without charts but text only, the "<%= get_value_from_db() %>" gets rendered correctly -- I'm goooood .在其他页面上，没有图表而只有文本，“<%= get_value_from_db() %>”被正确呈现—— I'm goooood 。

Answer 1

I've had the same issue but only with ' and " which get rendered as "&39," or "&34," .我遇到了同样的问题，但只有 ' 和 " 呈现为 "&39," 或 "&34," 。

As none of the above fixes worked for me, a quick and pretty dirty solution I've relied upon is using string.replace with the prime ( ′ ), and double prime ( ″ ) symbols - looped through a reasonable number of times.由于上述修复均不适合我，因此我依赖的一个快速且相当脏的解决方案是使用 string.replace 与素数 ( ′ ) 和双素数 ( ″ ) 符号 - 循环合理的次数。

<%= varName.replace("\'",'′').replace("\"",'″ ') %>

Also I think this error may have something to do with how Google Charts and EJS interact together as both the OP and I are using it and have this issue.此外，我认为此错误可能与 Google Charts 和 EJS 如何一起交互有关，因为 OP 和我都在使用它并遇到此问题。 (pure speculation) （纯属猜测）

Answer 2

Use \\ to escape '.使用 \\ 转义 '。 Look at the example看例子

 <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>

As you are getting tittle from db, you have to add \\ before ' in title string using string manipulation. 当您从 db 获得标题时，您必须使用字符串操作在标题字符串中的 ' 之前添加 \\。

Answer 3

you can use a dom element to convert the ascii characters to readable text您可以使用 dom 元素将 ascii 字符转换为可读文本

function convertToText(ascii) {
  var tempDiv = document.createElement('DIV');
  tempDiv.innerHTML = ascii;
  return tempDiv.textContent || tempDiv.innerText || '';
}

in your options...在你的选择...

chart.draw(data, {
  title: convertToText("<%= get_value_from_db() %>"),
  legend: {position: "none"},
});

see following working snippet...请参阅以下工作片段...

 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&#39;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>

Answer 4

Just use decodeURI on the text.只需在文本上使用 decodeURI。 My title comes from what the user has chosen from categories.我的标题来自用户从类别中选择的内容。 So, when I show the chart title, I do like this:所以，当我显示图表标题时，我喜欢这样：

title: decodeURI(strCategory) + ' from ' + decodeURI(strInitialDate) + ' to ' + decodeURI(strEndDate)标题：decodeURI(strCategory) + ' from ' + decodeURI(strInitialDate) + ' to ' + decodeURI(strEndDate)

My categories include, 'Alimentação', 'Feira/Sacolão' and others... It works even on smartphones.我的类别包括“Alimentação”、“Feira/Sacolão”等……它甚至适用于智能手机。

Hope it helps!希望能帮助到你！

Added: Works with alerts also... alert('Sem dados para o período de: ' + decodeURI(strInitialDate) + ' a ' + decodeURI(strEndDate))添加：也适用于警报... alert('Sem dados para o período de: ' + decodeURI(strInitialDate) + ' a ' + decodeURI(strEndDate))

防止 Google 图表在图表标题中转义撇号

问题描述

4 个解决方案

解决方案1
1 2018-07-05 03:23:54

解决方案2
0 2017-10-10 05:57:28

解决方案3
0 2017-10-10 11:30:14

解决方案4
0 2018-04-07 11:28:04

防止 Google 图表在图表标题中转义撇号

问题描述

4 个解决方案

解决方案1 1 2018-07-05 03:23:54

解决方案2 0 2017-10-10 05:57:28

解决方案3 0 2017-10-10 11:30:14

解决方案4 0 2018-04-07 11:28:04

解决方案1
1 2018-07-05 03:23:54

解决方案2
0 2017-10-10 05:57:28

解决方案3
0 2017-10-10 11:30:14

解决方案4
0 2018-04-07 11:28:04