Google Charts - 在javascript中将数据作为变量传递

Posted 2023-02-16

【中文标题】Google Charts - 在javascript中将数据作为变量传递

【英文标题】：Google Charts - passing data as variable in javascript

【发布时间】：2020-08-14 17:43:46

【问题描述】：

我正在使用谷歌图表在健康应用程序中创建报告。由于应用程序的工作方式，我必须在 XSL 文档中为图表定义数据，然后使用 javascript 来获取和使用该数据。我无法在 XSL 中运行 javascript 内联 - 应用程序阻止了它。

XSL 工作正常，并为我提供以下信息：-

<div id="mydata" style="display:none;">
        [c:[v: new Date(2020,3,21), v:94.05],
         c:[v: new Date(2020,3,29), v:94.3],
         c:[v: new Date(2020,4,5), v:95],]
</div>

我的 javascript 然后看起来像这样：-

  google.charts.load('current', 'packages':['corechart']);
  google.charts.setOnLoadCallback(drawChart);
  var mydata=$("#mydata").text()
  var mydata=mydata.replace(",]", "]");
  var myconfig="cols: [id: 'Date', label: 'Date', type: 'date',id: 'Weight', label: 'Weight', type:'number'],rows: " + mydata + ""


function drawChart() 
    var data = new google.visualization.DataTable(myconfig);



    var options = 
      title: 'Patient Weight',
      curveType: 'function',
      legend:  position: 'bottom' 
    ;

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

    chart.draw(data, options);
  

问题是它不起作用。我明白了：

Uncaught (in promise) SyntaxError: Unexpected token c in JSON at position 0
    at JSON.parse (<anonymous>)
    at gvjs_Li (jsapi_compiled_default_module.js:55)
    at new gvjs_L (jsapi_compiled_default_module.js:161)
    at drawChart (<anonymous>:8:20)

如果我从 myconfig 中复制值并将其粘贴到 google 可视化中，它可以完美运行。这是生成的 myconfig 变量：-

 cols: [id: 'Date', label: 'Date', type: 'date',id: 'Weight', label: 'Weight', type:'number'],rows: 
        [c:[v: new Date(2020,3,21), v:94.05],c:[v: new Date(2020,3,29), v:94.3],c:[v: new Date(2020,4,5), v:95]]

这快把我逼疯了。请帮忙！

更新：

终于破解了！！

我也将 cols 定义放入 DIV 中，并在所有内容周围加上引号，按照建议删除了“新”，最后它起作用了！！

【问题讨论】：

我认为您在 div 中定义的数据末尾附近有一个额外的逗号。

这是真的，但 .replace JS 中的删除它。抱歉 - 我粘贴了错误的 javascript（脚本现已更正）

【参考方案1】：

我有时会使用这种方法，这就是我发现的。

硬编码数据的原因， 您正在将一个对象传递给数据表。

但是当数据来自 XSL 时，它是一个字符串。

首先，所有对象键都必须用引号括起来。 其次，您不能在日期上使用new 运算符。 你必须使用谷歌的date string representation

尝试从 XSL 中按如下方式格式化数据...

["c":["v": "Date(2020,3,21)", "v":94.05],
     "c":["v": "Date(2020,3,29)", "v":94.3],
     "c":["v": "Date(2020,4,5)", "v":95]]

---

注意：关于逗号，以下是我用来防止最后一个逗号的xsl...

<xsl:if test="position() != last()">,</xsl:if>

【讨论】：

希望这会有所帮助——评论中提到的最后一个逗号可能是个问题，如果它仍然不起作用，请将其删除...