谷歌图表--在javascript中以变量形式传递数据。

问题描述 投票:1回答:1

我正在使用google charts在一个健康应用程序中创建一个报告。由于应用程序的工作方式,我必须在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);
  }

问题是它没有工作。我得到的是.XSL的值。

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 visualisation中,它就能完美工作。 这是结果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,并把引号周围的EVERYTHING,删除 "新 "的建议,最后它的工作原理!!!。

javascript xslt charts google-visualization
1个回答
2
投票

我偶尔会使用这种方法,这是我发现的。

当你硬编码数据时,它工作的原因是,你在向数据表传递一个对象。

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

首先,所有的对象键都必须用引号包装。其次,你不能使用 new 操作员对日期。你必须使用谷歌的 日期字符串表示法

试着用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>
© www.soinside.com 2019 - 2024. All rights reserved.