javascript - Highcharts，5个小图表，有些随机不画
问题描述
我在高图表时遇到了一些奇怪的问题。我连续有 5 个小图表，有时其中一两个随机不会在屏幕上绘制。
这是我使用的代码
// Twitter
// The file twitter_history.tsv is being manually generated by a given excel
$.ajax({
type: "GET",
url: "downloads/twitter_history.tsv",
dataType: "text",
success: function(data) {
var twitter_hist_new_followers_options = {
chart: {
renderTo: 'fol_mini',
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
zoomType: 'x'
},
exporting: { enabled: false },
title: null,
credits: {
enabled: false
},
xAxis: {
categories: [],
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
series: [{
name: 'Followers',
data: []
}]
};
var twitter_hist_tweet_impressions_options = {
chart: {
renderTo: 'imp_mini',
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
zoomType: 'x'
},
exporting: { enabled: false },
title: null,
credits: {
enabled: false
},
xAxis: {
categories: [],
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
series: [{
name: 'Impressions',
data: []
}]
};
var twitter_hist_number_of_tweets_options = {
chart: {
renderTo: 'twe_mini',
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
zoomType: 'x'
},
exporting: { enabled: false },
title: null,
credits: {
enabled: false
},
xAxis: {
categories: [],
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
series: [{
name: 'Tweets',
data: []
}]
};
var twitter_hist_profile_visits_options = {
chart: {
renderTo: 'vis_mini',
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
zoomType: 'x'
},
exporting: { enabled: false },
title: null,
credits: {
enabled: false
},
xAxis: {
categories: [],
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
series: [{
name: 'Visits',
data: []
}]
};
var twitter_hist_mentions_options = {
chart: {
renderTo: 'men_mini',
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
style: {
overflow: 'visible'
},
// small optimalization, saves 1-2 ms each sparkline
skipClone: true,
zoomType: 'x'
},
exporting: { enabled: false },
title: null,
credits: {
enabled: false
},
xAxis: {
categories: [],
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
series: [{
name: 'Mentions',
data: []
}]
};
var lines=data.split('\n');
$.each(lines, function(lineNo, line) {
if (lineNo !== 0) {
var items = line.split('\t');
// New Followers
twitter_hist_new_followers_options.xAxis.categories.push(items[0]);
twitter_hist_new_followers_options.series[0].data.push(parseFloat(items[5]));
// Impressions
twitter_hist_tweet_impressions_options.xAxis.categories.push(items[0]);
twitter_hist_tweet_impressions_options.series[0].data.push(parseFloat(items[2]));
// Number of Tweets
twitter_hist_number_of_tweets_options.xAxis.categories.push(items[0]);
twitter_hist_number_of_tweets_options.series[0].data.push(parseFloat(items[1]));
// Profile Visits
twitter_hist_profile_visits_options.xAxis.categories.push(items[0]);
twitter_hist_profile_visits_options.series[0].data.push(parseFloat(items[3]));
// Mentions
twitter_hist_mentions_options.xAxis.categories.push(items[0]);
twitter_hist_mentions_options.series[0].data.push(parseFloat(items[4]));
}
});
var new_followers = new Highcharts.Chart(twitter_hist_new_followers_options);
var tweet_impressions = new Highcharts.Chart(twitter_hist_tweet_impressions_options);
var number_of_tweets = new Highcharts.Chart(twitter_hist_number_of_tweets_options);
var profile_visits = new Highcharts.Chart(twitter_hist_profile_visits_options);
var hist_mentions = new Highcharts.Chart(twitter_hist_mentions_options);
}
});
我究竟做错了什么？为什么有时第二个，有时第五个图表不显示？它让我疯狂。数据是静态的。
解决方案
尝试像这样在每次渲染之间添加一些时间：
var new_followers = new Highcharts.Chart(twitter_hist_new_followers_options);
setTimeout(function(){
var tweet_impressions = new Highcharts.Chart(twitter_hist_tweet_impressions_options);
}, 200);
setTimeout(function(){
var number_of_tweets = new Highcharts.Chart(twitter_hist_number_of_tweets_options);
}, 400);
setTimeout(function(){
var profile_visits = new Highcharts.Chart(twitter_hist_profile_visits_options);
}, 600);
setTimeout(function(){
var hist_mentions = new Highcharts.Chart(twitter_hist_mentions_options);
}, 800);
推荐阅读
- c# - SqlException 出现时间过长
- node.js - npm SSL 错误：使用 sha512 时完整性校验和失败
- node.js - 如何在 ReactJS 中更新和预填充表单
- sql - 如何修复更新查询中的语法错误（缺少运算符）
- python - 为什么内联交换返回意外结果？
- azure - 将 Azure RM 值放入变量中
- qt - 是否可以使用 QSS 为选中的 QToolButton 设置样式？
- python - Python - 从数组中选择随机名称而不重复，直到全部选择
- react-bootstrap - 如何设置 React Bootstrap Table 列过滤框的样式
- c - 找不到 -lstatic