Ruby on Rails 7中Highcharts仅渲染单个数据点的问题求助

问题根源 #

你当前的代码存在数组嵌套冗余的问题：categories、name、data部分都额外套了一层方括号，导致Highcharts接收到的格式不符合要求，只能识别单个数据点。

修正步骤 #

假设后端的fact对象结构是：

• name: 字符串（比如"销量"）
• date: 日期数组（比如["2024-01-01", "2024-01-02"]）
• data: 数值数组（比如[100, 200]）

直接修改脚本中的对应部分：

1. xAxis.categories：去掉外层方括号，因为fact.date.to_json已经生成了合法的数组格式
2. series.name：去掉方括号，name是单个字符串，不需要数组包裹
3. series.data：去掉外层方括号，直接使用fact.data.to_json生成的数值数组

修正后的完整代码 #

<script>
Highcharts.chart('chart', {
    yAxis: {
        title: {
            text: 'Facts'
        }
    },
    xAxis: {
        title: {
            text: 'Date'
        },
        categories: <%= raw fact.date.to_json %>
    },
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            }
        }
    },
    series: [{
        name: <%= raw fact.name.to_json %>, 
        data: <%= raw fact.data.to_json %>
    }],
});
</script>

针对你提到的两种Highcharts数据格式的传递方式 #

1. 多系列单数据点格式（每个系列对应一个数据点）
   如果后端是多个系列的集合（比如facts数组，每个元素有name和data），可以直接把整个集合转成JSON：

series: <%= raw facts.to_json(only: [:name, :data]) %>

生成的格式就是：[{name: "a", data: [1]}, {name: "b", data: [2]}]

2. 单系列多数据点格式（当前折线图需要的格式）
   就是上面修正后的代码，确保data是一个数值数组，categories是对应的日期数组即可。

内容的提问来源于stack exchange，提问作者Anne Lalsingh