为什么在使用400个数据点时会显示“无法读取未定义的属性'isValid'”?

时间:2019-06-23 21:23:29

标签: highcharts timeline

我正在尝试使用highcharts时间轴可视化400多个数据点,但是我得到了Cannot read property 'isValid' of undefined

提琴:https://jsfiddle.net/0fv2kxqb/

const test = [];
for (let i = 0; i < 400; i++) {
  test.push({
    x: Date.UTC(1900 + i, 9, 4),
    name: 'test'
  });
}

Highcharts.chart('container', {
  chart: {
    zoomType: 'x',
    type: 'timeline'
  },
  xAxis: {
    type: 'datetime',
    visible: false
  },
  yAxis: {
    gridLineWidth: 1,
    title: null,
    labels: {
      enabled: false
    }
  },
  legend: {
    enabled: false
  },
  title: {
    text: 'Timeline of Space Exploration'
  },
  subtitle: {
    text: 'Info source: <a href="https://en.wikipedia.org/wiki/Timeline_of_space_exploration">www.wikipedia.org</a>'
  },
  tooltip: {
    style: {
      width: 300
    }
  },
  series: [{
    dataLabels: {
      allowOverlap: false,
      format: '<span style="color:{point.color}">● </span><span style="font-weight: bold;" > ' +
        '{point.x:%d %b %Y}</span><br/>{point.label}'
    },
    marker: {
      symbol: 'circle'
    },
    data: test
  }]
});
#container {
  min-width: 400px;
  max-width: 600px;
  margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>

<div id="container"></div>

它可以处理约300个数据点

它不适用于大量数据点吗?

1 个答案:

答案 0 :(得分:0)

该问题是一个错误,在这里报告:https://github.com/highcharts/highcharts/issues/11116

可能的解决方法:

  • www.ourfruit.net/fruit/red_apple_is_healthy.html www.ourfruit.net/fruit_offer/green_banana_love.html www.ourfruit.net/fruit_export/banana_brazil_yellow_quality_export.html 设置为大于数据长度:https://jsfiddle.net/BlackLabel/rtkj5xd7/
  • 启用function findFruits() { var url_path = window.location.pathname; var url_path = url_path.replace(/\//g, "_"); var url_path = url_path.replace("_", ""); var url_path = url_path.replace("_index.html", ""); if (-1 !== url_path.match(/^.*apple.*$/)) theFruit = "fruit_apple"; if (-1 !== url_path.match(/^.*pear.*$/)) theFruit = "fruit_pear"; if (-1 !== url_path.match(/^.*white.*pear.*$/)) theFruit = "fruit_white_pear"; if (-1 !== url_path.match(/^.*banana.*$/)) theFruit = "fruit_banana"; if (-1 !== url_path.match(/^.*banana.*brazil.*$/)) theFruit = "fruit_banana_brazil"; tagData.tagValue.push({ "tags": [{ "tag": "FRUIT_POPULATE", "value": theFruit }], "isEvent": true, "isTargeting": true }) } jQuery(document).ready(function() { findFruits(); }); https://jsfiddle.net/BlackLabel/rtkj5xd7/2/