2016-05-11 2 views
4

привет Я хочу, чтобы создать highchart как этот map demoМультсериал в highchart

Я создал пунктирную линию highchart, но не знаю, как поставить эту анимацию.

$(function() { 
    $('#container').highcharts({ 


     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], 
      color: '#FF0000', 
      dashStyle: 'dash' 
     }] 
    }); 
}); 

Моя скрипка ссылка http://jsfiddle.net/puuqbo6n/

+0

ссылка на скрипку http://jsfiddle.net/puuqbo6n/ – vandy

+0

вы хотите, чтобы диаграмма работала как это ?? – shv22

+0

да, я хочу ту же анимацию – vandy

ответ

4

CSS анимация может сделать это, установив stroke-dashoffset в @keyframes to к некоторому отрицательному значению (если вы хотите, чтобы идти влево-вправо) и запустив анимация на бесконечность (при условии, что вы тоже этого хотите). Техника в основном learned here.

.highcharts-series path { 
    animation: dash 5s linear infinite; 
} 

@keyframes dash { 
    to { 
    stroke-dashoffset: -100; 
    } 
} 

http://jsfiddle.net/puuqbo6n/3/

Однако, работая над этим, мое использование CPU, казалось, идти вверх.