原創|使用教程|編輯:龔雪|2014-02-28 09:36:55.000|閱讀 7725 次
概述:本節將為大家講解如何使用交互圖表Highcharts設置動畫。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
設置所有圖表更新的整體動畫。設置為 false 時,圖表動畫被關閉。這也可以通過單獨的API方法通過參數來覆蓋。這個選項在初始化圖表的動畫中不會起作用。
動畫可以設置為布爾值或一個配置對象。如果 true, 它會使用'swing' jQuery 緩動效果, 時長500ms. 如果使用一個配置對象,支持下面的屬性:
duration:時間以毫秒為單位的動畫。
easing:當使用jQuery作為總體框架, 緩動效果能設置為 linear 或 swing。當使用jQuery plug-ins時,有更多的緩動函數支持,尤其是jQuery UI套件。見。當使用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); }); });
效果圖:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網