javascript - 谷歌图表中特定数据的浏览器崩溃

Question

var timeType = "year", data = JSON.parse('{"cols":[{"label":"Year","type":"string"},{"label":"Scans successful","type":"number"},{"label":"Scans failed","type":"number"},{"label":"Scans declined","type":"number"}],"rows":[{"c":[{"v":0,"f":2016},{"v":5},{"v":0},{"v":3}]},{"c":[{"v":1,"f":2015},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":2,"f":2014},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":3,"f":2013},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":4,"f":2012},{"v":0},{"v":0},{"v":0}]},{"c":[{"v":5,"f":2011},{"v":0},{"v":0},{"v":0}]}]}');
    
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(chartReady);

function chartReady() {
  chartData = new google.visualization.DataTable(data);
  chart = new google.visualization.ComboChart(document.getElementById('comboMonthScan'));
  chart.draw(chartData, {
    seriesType: 'bars',
    chartArea: {
      'width': '90%',
      'height': '80%'
    },
    legend: {
      'position': 'top'
    }
  });
}

<div id="comboMonthScan" style="width:100%; height:400px;"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

警告:运行代码片段可能会使您的浏览器崩溃!

根据 console.log 输出数据是有效的。对于不同的数字，它可以工作并显示预期结果，同时显示此子集会立即卡住 UI，使 CPU 峰值超过 50% 并开始消耗 RAM，直到它被强行关闭。我已经created a GitHub issue但看起来存储库不是由 Google 维护的。

为什么会出现这个问题，我怎样才能解决这个问题？我是否使用了使可视化 API 崩溃的关键字？

Answer 1

我自己找到了解决方案:其他值是有效的，因为作为文本标签 (f) 我使用了一个字符串。我想填写年份，但它被转换为数字。这似乎会使浏览器崩溃，因为 Google Charts 无法将此数字视为字符串。