Google Charts - передача данных в виде переменной в javascript - PullRequest
Новая
       69

Google Charts - передача данных в виде переменной в javascript

1 голос
/ 30 апреля 2020

Я создаю отчет в медицинском приложении, используя диаграммы Google. В связи с тем, как работает приложение, я должен определить данные для диаграммы в документе XSL, а затем использовать javascript, чтобы получить и использовать эти данные. Я не могу запустить javascript inline в XSL - приложение блокирует его.

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>

My 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 и поместил кавычки вокруг ВСЕГО, удалил «новое», как предложено, и, наконец, оно работает !!

1 Ответ

2 голосов
/ 30 апреля 2020

Я иногда использую этот подход, вот что я нашел.

причина, по которой это работает, когда вы жестко кодируете данные,
вы передаете объект в таблицу данных.

но когда данные поступают из XSL, это строка.

во-первых, все ключи объекта должны быть заключены в кавычки.
во-вторых, вы не можете использовать оператор new для дат.
вы должны использовать представление строки даты в Google

попробуйте отформатировать данные следующим образом из примечания 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>
...