1850/01 -0.845 -0.922 -0.748 -1.038 -0.652 -1.379 -0.311 -1.053 -0.636 -1.418 -0.272 1850/02 -0.043 -0.113 0.047 -0.244 0.159 -0.613 0.528 -0.260 0.177 -0.653 0.569 1850/03 -0.698 -0.794 -0.633 -0.891 -0.506 -1.123 -0.274 -0.910 -0.495 -1.174 -0.229 ………. 2016/12 0.795 0.746 0.828 0.756 0.834 0.586 1.005 0.731 0.848 0.575 1.010 2017/01 1.025 0.977 1.067 0.983 1.068 0.786 1.265 0.963 1.084 0.778 1.271 2017/02 1.151 1.098 1.198 1.112 1.191 0.957 1.346 1.089 1.208 0.946 1.352
从1850年开始到2017年和每个月.我正在处理这个数据集,在这样的Highcharts中使用它
$.each(lines,function(index,row) {
var cells = row.split(','),series = {
type: 'line',data:[]
};
$.each(cells,function(itemNo,item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
data.push(series);
});
我以下列方式使用它
chart = $('#container').highcharts({
chart: {
polar: true
},series: data
});
这确实有效,但真的很慢.如何提高/提升其性能,以便我的快速加载快速加载,而不会冻结浏览器？
UPDATE
这是我的xAxis
xAxis: {
tickInterval: 1,min: 0,max: 12,categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],},
更新2
yAxis: {
min: -1,max: 2.2,endOnTick: false,title: {
text: 'Temperature (°C)'
},plotLines: [{
value: 2,width: 1,label: {
text: '2°C',align: 'right',y: 2
},color: 'red'
},{
value: 1.5,label: {
text: '1.5°C',y: 30
},color: 'red'
}],
解决方法
实际上,您可以很容易地生成图表,而无需更改您现在正在进行的任何操作,但随后提取生成的SVG,并为您的访问者提供服务.
为此,您只需使用HighCharts的getSVG方法,这将以字符串格式返回SVG.
我真的不知道你想要有一些自动更新图表的过程,但是您可以为此使用一个cron作业.请记住,即使您最初的更新数据方式,您也必须采取一些措施.
关于你的脚本,首先要注意的是,你使用的是$.each,这在性能方面与香草的等效性相比是非常糟糕的.如jsPerf所示,我以$.each获得3,649 Op / s,而for循环可以让您达到202,755 Op / s,这是更疯狂！既然你也做了一个双循环,差异将是^ 2.
但是再次,由于数据没有经常更新,脚本的这一部分可以被完全删除,并转换为对应于该函数的输出的JSON,HighCharts可以直接加载,跳过CSV的整个处理和转换.
如果不需要使用HighCharts,则可以使用react-vis,它是围绕数据可视化关注的React组件的集合.它是建立在SVG顶部的api.
我做了一个演示,你可以checkout on CodePen与您绘制自1850年以来的每月温度相同的数据.
const {
HorizontalGridLines,XAxis,XYPlot,YAxis,LineMarkSeries,} = reactVis
const color = d3.scaleLinear()
.domain([1850,2017])
.range(['yellow','red'])
const Chart = () => (
<XYPlot width={window.innerWidth - 100} height={window.innerHeight - 100}>
<XAxis title='Month' />
<YAxis title='Temperature' />
<HorizontalGridLines />
{Object.keys(data).map(key => (
<LineMarkSeries color={color(key)} data={data[key]} key={key} />
))}
</XYPlot>
)
ReactDOM.render(<Chart />,document.querySelector('#root'))
我也使用d3的scaleLinear方法看到这些年来的变化,因为我认为这将是一个有趣的信息显示,但它可以根据您的需要而改变.
它正在使用SVG,但是我们也正在通过deck.gl中间程序与webgl进行集成,这将允许更多的优化增益,但还没有准备好,我不确定你真的需要那么多,但值得一提的是.
免责声明：我目前在Uber工作,这使得甲板和反应.