我正在尝试使用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个数据点
它不适用于大量数据点吗?
答案 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/