原創(chuàng)|使用教程|編輯:龔雪|2014-02-28 09:36:55.000|閱讀 7725 次
概述:本節(jié)將為大家講解如何使用交互圖表Highcharts設(shè)置動(dòng)畫(huà)。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>
相關(guān)鏈接:
設(shè)置所有圖表更新的整體動(dòng)畫(huà)。設(shè)置為 false 時(shí),圖表動(dòng)畫(huà)被關(guān)閉。這也可以通過(guò)單獨(dú)的API方法通過(guò)參數(shù)來(lái)覆蓋。這個(gè)選項(xiàng)在初始化圖表的動(dòng)畫(huà)中不會(huì)起作用。
動(dòng)畫(huà)可以設(shè)置為布爾值或一個(gè)配置對(duì)象。如果 true, 它會(huì)使用'swing' jQuery 緩動(dòng)效果, 時(shí)長(zhǎng)500ms. 如果使用一個(gè)配置對(duì)象,支持下面的屬性:
duration:時(shí)間以毫秒為單位的動(dòng)畫(huà)。
easing:當(dāng)使用jQuery作為總體框架, 緩動(dòng)效果能設(shè)置為 linear 或 swing。當(dāng)使用jQuery plug-ins時(shí),有更多的緩動(dòng)函數(shù)支持,尤其是jQuery UI套件。見(jiàn)。當(dāng)使用Mootools作為總體框架,使用的屬性名為transition而不是easing。
$(function () { $('#container').highcharts({ chart: { animation: false }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); i = 1; $('#update').click(function() { var chart = $('#container').highcharts(); chart.series[0].data[0].update(i++ % 2 ? 200 : 0); }); });
效果圖:
$(function () { $('#container').highcharts({ chart: { animation: { duration: 1000 } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); i = 1; $('#update').click(function() { var chart = $('#container').highcharts(); chart.series[0].data[0].update(i++ % 2 ? 200 : 0); }); });
效果圖:
$(function () { $('#container').highcharts({ chart: { animation: { duration: 1500, easing: 'easeOutBounce' } }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); i = 1; $('#update').click(function() { var chart = $('#container').highcharts(); chart.series[0].data[0].update(i++ % 2 ? 200 : 0); }); });
效果圖:
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都控件網(wǎng)