首页 文章

防止Google Charts在图表 Headers 中转义撇号

提问于
浏览 次
2

我正在使用谷歌条形图https://developers.google.com/chart/interactive/docs/gallery/barchart . Headers 存储在数据库中，有些包含撇号 . Headers 中的那些撇号呈现为 &39 ，例如"he's" ---> "he&39s"

我想要撇号正常渲染 .

我找到了几个解决方案，但到目前为止还没有一个解决这么简单的任务 .

任何 working 解决方案？

update:

这是正确呈现，如 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 .

javascript google-visualization

4 回答

  • 0

    我有同样的问题，但只有'和'被渲染为“＆39”或“＆34” .

    由于上述修复程序都不适用于我，我依赖的一个快速且非常脏的解决方案是使用带有prime（'）和double prime（“）符号的string.replace - 循环合理的次数 .

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

    此外，我认为这个错误可能与谷歌图表和EJS如何相互作用有关，因为OP和我正在使用它并且有这个问题 . （纯粹猜测）

    回复于
  • 0

    使用\来逃避' . 看看这个例子

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

    当你从db变得很小时，你必须使用字符串操作在 Headers 字符串中添加\ .

    回复于
  • 0

    您可以使用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&#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>
    回复于
  • 1

    只需在文本上使用decodeURI即可 . 我的 Headers 来自用户从类别中选择的内容 . 所以，当我显示图表 Headers 时，我喜欢这样：

    title：decodeURI（strCategory）'从'decodeURI（strInitialDate）'到'decodeURI（strEndDate）

    我的类别包括'Alimentação'，'Feira /Sacolão'等等......它甚至可以在智能手机上使用 .

    希望能帮助到你！

    补充：使用警报也...警报（'sem dados paraoperíodode：'decodeURI（strInitialDate）''decodeURI（strEndDate））

    回复于

相关问题