Highcharts调用Google Sheets v4 API数据不渲染折线报错#14如何解决

问题原因 #

你遇到的两个报错根因非常明确：

• 错误#14：系列数据收到了非数字类型的值，你指定的拉取范围Barack Obama!A2:E500前两列都是日期格式的字符串，Highcharts默认从第二列开始读取系列值，把日期字符串传给了需要数字的支持率系列，触发类型错误。
• 错误#15：X轴时间数据是倒序排列的（最新日期在前），Highcharts要求时间轴数据为升序排列，触发排序警告。

修复方案 #

仅需要修改你代码中的两处配置即可：

1. 补充data节点的配置项，明确指定X轴取值列、系列数据起始列、日期解析规则、倒序数据修复逻辑
2. 给X轴明确指定类型为datetime

修改后的完整配置示例 #

你只需要替换原有options对象的对应部分即可：

var options = {
  "title": {
    "text": "Barack Obama Approval Ratings"
  },
  "subtitle": {
    "text": "2009-2017"
  },
  "exporting": {},
  "yAxis": [{
    "title": {
      "text": "Approval Rating"
    },
    "labels": {}
  }],
  "series": [{
    "name": "Approving"
  }, {
    "name": "Disapproving"
  }, {
    "name": "Unsure/NoData"
  }],
  "chart": {},
  "xAxis": [{
    "type": "datetime", // 新增：指定X轴为时间类型
    "title": {
      "text": "Years"
    },
    "labels": {}
  }],
  "plotOptions": {
    "series": {
      "dataLabels": {}
    }
  },
  "tooltip": {
    "shared": true
  },
  "credits": {
    "text": "The American Presidency Project"
  },
  "data": {
    "googleSpreadsheetKey": "1iEl565M1mICTubTtoxXMdxzaHzAcPTnb3kpRndsrfyY",
    "googleSpreadsheetRange": "Barack Obama!A2:E500",
    "dataRefreshRate": false,
    "enablePolling": true,
    "googleAPIKey": "***********************************",
    // 以下为新增配置
    "xAxisColumn": 1, // 指定索引为1的B列（长日期）作为X轴数据源，若要使用A列短日期可改为0
    "seriesStartColumn": 2, // 指定系列数据从索引为2的C列开始读取
    "parseDate": function(dateStr) {
      return new Date(dateStr).getTime(); // 把日期字符串转为Highcharts识别的时间戳
    },
    "complete": function(options) {
      // 反转所有系列的数据，修复日期倒序问题
      options.series.forEach(series => {
        series.data = series.data.reverse();
      });
    }
  }
};

修改后刷新页面即可正常渲染折线。

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