chart.js之饼动画，网页中玩一次，如果在某个位置通过垂直滚动 [英] chart.js pie animation, play one time, when at certain position in page via vertical scroll
本文介绍了chart.js之饼动画，网页中玩一次，如果在某个位置通过垂直滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一种简单的饼图，上载动画开箱从 chart.js之的 - 我试图让动画在一个长的垂直网页通过一定的滚动一点阙 - 这个想法是为低于code来执行，只有一次一次的新用户滚动或打页面位置 - 动画会阙一次，仅此而已。这导致了很多麻烦 - 因为我已经能够执行，并在使用断点和窗口滚动页面位置显示/隐藏元素，但是这个动画不会与执行内联，而不是各种方法我试图做到这一点;会发生什么是动画刷新和重放每次浏览器滚动条调整半点。它只是刷新，滚动>动画刷新>滚动>动画刷新。在那里任何指针;该chart.js之文档是不是在这个非常有帮助的，因为无论是作为大多数的演示与onDomready。我发现的方式与断点执行jQuery的，你可以在评论code以下看到的，但在短短的实际动画忽略和火灾在每一个滚动调整。
另外这里的主要外部chart.js之文件的权力之下。
chart.js之外部JS
VAR断点= FALSE;$（窗口）.scroll（函数（）{
如果（$（本）.scrollTop（）＆GT; 1300安培;＆安培;！断点）{
// 做东西 // $（窗口）.scroll（函数（）{
//如果（$（本）.scrollTop（）＆GT; 1100）{ // $（函数（）{
// $（文件）。就绪（函数（）{ VAR图= NULL; VAR颜色= Highcharts.getOptions（）。颜色，
类别= ['店'，'买入'，'自己']，
名称='浏览器品牌'，
数据= [{
// Y：55.11，
//颜色：颜色[0]
//深入分析：{
//名称：'MSIE版本'，
//类：['MSIE 6.0，7.0 MSIE，MSIE 8.0，9.0 MSIE']，
//数据：[10.85，7.35，33.06，2.81]
//颜色：颜色[0]
//}
//}，{
Y：3，
颜色：颜色[8]
深入分析：{
名称：'买入'，
//类：['火狐2.0，3.0火狐，火狐3.5，火狐3.6，4.0火狐']，
数据：[10.20，10.83，11.58，13.12，5.43]
颜色：颜色[8]
}
}，{
Y：7，
颜色：颜色[8]
深入分析：{
名称：'自己'，
//类：['的Chrome 5.0，6.0铬，浏览器7.0，8.0铬，浏览器9.0，
//'Chrome的10.0，11.0铬，Chrome的12.0']，
数据：[0.12，0.19，0.12，0.36，0.32，9.91，0.50，0.22]
颜色：颜色[8]
}
}，{
Y：10，
颜色：颜色[8]
深入分析：{
名称：'自己'，
//类：['Safari浏览器5.0，4.0的Safari，野生动物园赢5.0，4.1的Safari，Safari浏览器/傲游'，
//'Safari浏览器3.1，4.1的Safari']，
数据：[4.55，5.42，6.23，0.21，0.20，0.19，0.14]
颜色：颜色[8]
}
//}，{
// Y：2.14，
//颜色：颜色[8]
//深入分析：{
//名称：'家'，
// //类别：['的Opera 9.x，歌剧10.x的，歌剧11.x的']，
//数据：[20.1，0.37，1.65，
//颜色：颜色[8]
//}
}];
//构建数据阵列
变种browserData = [];
对于（VAR I = 0; I＆LT; data.length;我++）{ //添加浏览器数据
browserData.push（{
名称：类别[I]
Y：数据[I] .Y，
颜色：数据[I]。颜色
}）; } //创建图表
图=新Highcharts.Chart（{
图：{
renderTo：容器，
类型：'馅饼'
}，
标题：{
文本：空
}，
系列：[{
名称： ''，
数据：browserData，
innerSize：'20％'
}]，
提示：{
valueSuffix：'％'，
定位：功能（）{
返回{
X：this.chart.series [0] .center [0] - （this.label.width / 2）+ 8，
Y：this.chart.series [0] .center [1] - （this.label.height / 2）+ 8
};
}
}，
plotOptions：{
馅饼：{
光标：指示器，
dataLabels：{
connectorColor：白
}，
点：{
事件：{
鼠标悬停：功能（）{ 如果（！this.connector.dynamicConnector）{
变种宽度= 16，
高度= 24;
//提取连接器起始位置
变种dArr = this.connector.d.split（''）;
变种startY = dArr.pop（），
运行startx = dArr.pop（）;
VAR开始= [parseFloat（STARTX），parseFloat（startY）];
//构造三角形
VAR路径='M'+开始[0] +''+开始[1] +'L'+（开始[0] +高）+''+（开始[1] - （宽/ 2））+' L'+（开始[0] +高）+''+（开始[1] +（宽/ 2））+''L +开始[0] +''+开始[1]; //从弧度转换部分的角度度，适用于trangle
//设置旋转，X，Y所需的updateTransform方法
this.connector.rotation =（this.angle * 180）/ Math.PI;
this.connector.x = startx的;
this.connector.y = startY;
this.connector.updateTransform（）; this.connector.attr（'中风'，this.color）;
this.connector.attr（'补'，Highcharts.Color（this.color）.brighten（0.2）获得（））;
this.connector.attr（D，路径）; this.connector.dynamicConnector = TRUE;
}
this.connector.show（）;
}，
鼠标移开：功能（）{
this.connector.hide（）;
}
}
}
}
}
}）;
}
}）;
解决方案
如果有人有兴趣 - 我实现了我的目标与此插件。 Appear.js
＆LT;脚本SRC =http://rawgit.com/morr/jquery.appear/master/jquery.appear.js＆GT;＆LT; / SCRIPT＆GT;
__
/ **
* Highcharts插件推迟初次系列动画，直到元素出现。 Requieres
* jQuery.appear。
* /
（函数（H）{
功能deferAnimate（出发时，init）{
VAR系列=这一点，
$ renderTo = $（this.chart.container.parentNode）; // prevent pre-渲染动画不
如果（INIT）{
series.group.hide（）;
} // prepare动画
如果（INIT）{
$ renderTo.appear（）; //初始化显示插件
proceed.call（这一点，INIT）; //它出现，运行动画
}否则如果（$ renderTo.is（'：出现'））{
proceed.call（系列）;
series.group.show（）; //它没有出现，暂停动画，直到出现
}其他{
$ renderTo.on（'出现'，函数（）{
如果（！series.animated）{
proceed.call（系列）;
series.group.show（）;
series.animated = TRUE;
}
}）;
}
}; H.wrap（H.Series.prototype，动画，deferAnimate）;
H.wrap（H.seriesTypes.column.prototype，动画，deferAnimate）;
H.wrap（H.seriesTypes.pie.prototype，动画，deferAnimate）;}（Highcharts））;
I have a simple pie chart, that animates on load out of the box from chart.js -- I am trying to allow the animation to que via a certain scroll point in a long vertical webpage -- the idea is for the below code to execute, only one time once a new users scrolls or hits page position -- the animation would que once and that's it. This is causing a lot of trouble -- as I have been able to execute and show / hide elements at page position with breakpoints and window scroll, but this animation will not execute inline with that, instead every which way I try to achieve this; what happens is the animation refreshes and replays everytime the browser scroll bar is adjusted the slightest. It just refreshes, scroll > animation refreshes > scroll > animation refreshes. Any pointers out there; the chart.js docs isn't very helpful in this since either as most of the demos are with onDomready. I have discovered ways to execute jQuery with breakpoints as you can see in the commented code below, but the actual animation within just ignores and fires at every scroll adjustment.
Also here is main external chart.js file that powers the below.
Chart.JS external JS
var breakpoint = false;
$(window).scroll(function() {
if ($(this).scrollTop() > 1300 && !breakpoint ) {
// do stuff
// $(window).scroll(function() {
// if ($(this).scrollTop() > 1100) {
// $(function () {
// $(document).ready(function () {
var chart = null;
var colors = Highcharts.getOptions().colors,
categories = ['Shop', 'Buy', 'Own'],
name = 'Browser brands',
data = [{
// y: 55.11,
// color: colors[0],
// drilldown: {
// name: 'MSIE versions',
// categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'],
// data: [10.85, 7.35, 33.06, 2.81],
// color: colors[0]
// }
// }, {
y: 3,
color: colors[8],
drilldown: {
name: 'Buy',
// categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'],
data: [10.20, 10.83, 11.58, 13.12, 5.43],
color: colors[8]
}
}, {
y: 7,
color: colors[8],
drilldown: {
name: 'Own',
// categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0',
// 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'],
data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22],
color: colors[8]
}
}, {
y: 10,
color: colors[8],
drilldown: {
name: 'Own',
// categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon',
// 'Safari 3.1', 'Safari 4.1'],
data: [4.55, 5.42, 6.23, 0.21, 0.20, 0.19, 0.14],
color: colors[8],
}
// }, {
// y: 2.14,
// color: colors[8],
// drilldown: {
// name: 'Home',
// // categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'],
// data: [20.1, 0.37, 1.65],
// color: colors[8]
// }
}];
// Build the data array
var browserData = [];
for (var i = 0; i < data.length; i++) {
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
}
// Create the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
title: {
text: null
},
series: [{
name: '',
data: browserData,
innerSize: '20%'
}],
tooltip: {
valueSuffix: '%',
positioner: function () {
return {
x: this.chart.series[0].center[0] - (this.label.width / 2) + 8,
y: this.chart.series[0].center[1] - (this.label.height / 2) + 8
};
}
},
plotOptions: {
pie: {
cursor: 'pointer',
dataLabels: {
connectorColor: 'white'
},
point: {
events: {
mouseOver: function () {
if (!this.connector.dynamicConnector) {
var width = 16,
height = 24;
// Extract the connector start position
var dArr = this.connector.d.split(' ');
var startY = dArr.pop(),
startX = dArr.pop();
var start = [parseFloat(startX), parseFloat(startY)];
// Construct the triangle
var path = 'M ' + start[0] + ' ' + start[1] + 'L ' + (start[0] + height) + ' ' + (start[1] - (width / 2)) + ' L ' + (start[0] + height) + ' ' + (start[1] + (width / 2)) + ' L ' + start[0] + ' ' + start[1];
// Convert the section angle from radian to degree and apply to the trangle
// Setup rotation, x, y required by the updateTransform method
this.connector.rotation = (this.angle * 180) / Math.PI;
this.connector.x = startX;
this.connector.y = startY;
this.connector.updateTransform();
this.connector.attr('stroke', this.color);
this.connector.attr('fill', Highcharts.Color(this.color).brighten(0.2).get());
this.connector.attr('d', path);
this.connector.dynamicConnector = true;
}
this.connector.show();
},
mouseOut: function () {
this.connector.hide();
}
}
}
}
}
});
}
});
解决方案
If anyone is interested -- I achieved my goal with this plugin. Appear.js
<script src="http://rawgit.com/morr/jquery.appear/master/jquery.appear.js"></script>
__
/**
* Highcharts plugin to defer initial series animation until the element has appeared. Requieres
* jQuery.appear.
*/
(function (H) {
function deferAnimate (proceed, init) {
var series = this,
$renderTo = $(this.chart.container.parentNode);
// Prevent pre-rendering without animation
if (init) {
series.group.hide();
}
// Prepare for animation
if (init) {
$renderTo.appear(); // initialize appear plugin
proceed.call(this, init);
// It is appeared, run animation
} else if ($renderTo.is(':appeared')) {
proceed.call(series);
series.group.show();
// It is not appeared, halt animation until appear
} else {
$renderTo.on('appear', function () {
if (!series.animated) {
proceed.call(series);
series.group.show();
series.animated = true;
}
});
}
};
H.wrap(H.Series.prototype, 'animate', deferAnimate);
H.wrap(H.seriesTypes.column.prototype, 'animate', deferAnimate);
H.wrap(H.seriesTypes.pie.prototype, 'animate', deferAnimate);
}(Highcharts));
这篇关于chart.js之饼动画，网页中玩一次，如果在某个位置通过垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
