Laravel中Highcharts数据显示为[object Object]问题求助

这是代码处理数据的错误，不是额外配置的问题。你的JSON响应是对象数组，每个元素都是包含CUSTOMER字段的对象，而Highcharts无法直接解析对象类型的数据，会默认调用对象的toString()方法，最终显示[object Object]。

解决方式 #

方式一：前端处理数据 #

在拿到后端返回的JSON后，通过map方法提取每个对象里的CUSTOMER字段值，转换成字符串数组再传给Highcharts：

// 假设通过axios获取数据
axios.get('/api/customers')
  .then(res => {
    // 提取客户名称数组
    const customerNames = res.data.map(item => item.CUSTOMER);
    
    // 初始化Highcharts图表
    Highcharts.chart('chart-container', {
      xAxis: {
        categories: customerNames // 使用处理后的字符串数组作为分类
      },
      series: [{
        name: '客户列表',
        data: customerNames.map(name => 1) // 根据你的图表类型调整数据格式，这里示例用固定值1
      }]
      // 其他图表配置...
    });
  });

方式二：后端提前处理（Laravel端） #

在Laravel控制器中直接返回CUSTOMER字段的字符串数组，减少前端处理步骤：

public function getCustomerList()
{
    // 从数据库获取客户数据，只取CUSTOMER字段
    $customers = \App\Models\Customer::pluck('CUSTOMER')->toArray();
    
    // 返回纯字符串数组的JSON
    return response()->json($customers);
}

完成上述处理后，Highcharts就能正确显示客户名称，而不是[object Object]。

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