Rumah > Artikel > hujung hadapan web > Cara menggunakan kesan animasi carta dalam Highcharts
Highcharts ialah perpustakaan carta JavaScript yang berkuasa yang menyediakan banyak jenis carta dan pilihan penyesuaian. Ia juga mempunyai kesan animasi yang mudah digunakan yang menjadikan visualisasi data lebih jelas. Dalam artikel ini, kita akan belajar cara menggunakan kesan animasi carta dalam Highcharts dan menunjukkan beberapa contoh kod khusus.
Highcharts.chart('container', { chart: { type: 'pie', animation: true, // 开启动画 }, title: { text: '圆形进度条', }, plotOptions: { pie: { dataLabels: { enabled: false, }, startAngle: -90, endAngle: 90, center: ['50%', '75%'], size: '150%', colors: ['#64E572', '#FFFF00', '#FD6666'], }, }, });
Dalam kod di atas, kami menetapkan animasi kepada benar dalam pilihan carta, yang bermaksud menghidupkan kesan animasi. Seterusnya, kami akan menyesuaikan data dan mengikatnya pada carta.
// 创建SVG路径动画效果 var chart = Highcharts.chart('container', { chart: { type: 'spline', animation: { //动画时长 duration: 2000, //定义一个缓动函数 easing: 'easeOutBounce' } }, title: { text: '数据展示' }, xAxis: { categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'] }, yAxis: { title: { text: '人数' } }, series: [{ name: '男', data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 24.2, 23.3, 18.3, 13.9, 9.6] }, { name: '女', data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6] }] }); //实现SVG路径动画 var path = chart.series[0].graph.element.getAttribute('d'); var pathLength = chart.series[0].graph.element.getTotalLength(); //设置dashStyle为ShortDash可以让线条更明显的显示出来 chart.series[0].update({ animation: { duration: 2000, easing: 'easeOutBounce' }, dashStyle: 'ShortDash', lineWidth: 2, marker: { enabled: false, radius: 4, symbol: 'square' }, dataLabels: { enabled: false } });
Dalam contoh ini, kami mencipta kesan animasi yang dilaksanakan oleh laluan SVG. Melalui sifat options.animation.duration dan options.animation.easing, anda boleh menetapkan tempoh animasi dan fungsi easing masing-masing. Seterusnya, kami mengikat data pada carta melalui sifat options.series dan melaksanakan animasi laluan SVG.
Ringkasan
Carta tinggi menyediakan pelbagai kesan animasi Kami boleh menetapkan dan menyesuaikan kesan animasi melalui kod ringkas untuk menjadikan carta lebih jelas. Dalam paparan data sebenar, penggunaan kesan animasi yang munasabah boleh membantu kami menyatakan data dengan lebih baik dan membangkitkan minat penonton.
Atas ialah kandungan terperinci Cara menggunakan kesan animasi carta dalam Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!