如何将Ruby数组传递给Google Charts JavaScript并解析？

嘿，我猜你现在遇到的问题应该是拿到的data-google值没法直接给Google Charts用对吧？其实核心问题很简单：你通过data-google="<%= @google_array %>"输出的是Ruby风格的字符串数组，不是JavaScript能直接识别的数组类型，得做两步处理才能搞定。

第一步：先修正Ruby端的输出格式 #

直接输出@google_array会生成Ruby语法的数组（比如用单引号包裹字符串），这不符合JSON规范，前端解析会报错。你需要把Ruby数组转换成标准JSON格式输出：

<div id="chart_time" data-google="<%= @google_array.to_json %>"></div>

to_json方法会帮你把Ruby数组转换成双引号包裹的标准JSON字符串，完全适配JavaScript的数组格式。

第二步：前端JS正确解析成数组 #

现在在JS里拿到属性值后，用JSON.parse()把字符串转成真正的JS二维数组，就能直接给Google Charts用了：

// 获取DOM元素
const chartElement = document.querySelector('#chart_time');
// 解析data属性的字符串为JS数组
const googleData = JSON.parse(chartElement.getAttribute('data-google'));

// 接下来正常初始化Google Charts即可
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 把解析后的数组传给Google Charts的方法
  const data = google.visualization.arrayToDataTable(googleData);
  const options = {
    title: '自定义图表标题',
    // 其他图表配置项
  };
  const chart = new google.visualization.LineChart(document.getElementById('chart_time'));
  chart.draw(data, options);
}

小技巧：用dataset属性简化写法 #

你也可以用HTML5的dataset API来获取data属性，写法更简洁：

const googleData = JSON.parse(chartElement.dataset.google);

效果和getAttribute完全一样，只是语法更清爽。

内容的提问来源于stack exchange，提问作者Johan Faerch