ChartJS и анимация радарной диаграммы

Я использую ChartJS для отображения данных, но я хочу, чтобы анимация диаграммы отображалась до тех пор, пока она не станет видимой на экране пользователя. Я следил за сообщением на How to make the Chart.js animate when scrolled to that section?, но он не работает, когда я использую его с радарной диаграммой. Пример кода ниже, и у меня есть настройка холста как обычно, например. холст ID = "холст:ChartJS и анимация радарной диаграммы

var radarChartData = { 
    labels: ["x", "x", "x", "x", "x"], 
    datasets: [{ 
     fillColor: "rgba(255, 97, 10, 0.5)", 
     strokeColor: "rgb(255, 97, 10)", 
     pointColor: "rgba(255, 255, 255, 1)", 
     pointStrokeColor: "rgba(255, 255, 255, 1)", 
     data: [48, 46, 47, 48, 38] 
    }] 

} 

var inView = false; 

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)); 
} 

$(window).scroll(function() { 
    if (isScrolledIntoView('#canvas')) { 
     if (inView) { 
      return; 
     } 
     inView = true; 
     newChart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, { 
      scaleShowLabels: false, 
      scaleShowLabelBackdrop: false, 
      scaleFontColor: "#fff", 
      pointLabelFontSize: 14, 
      pointLabelFontColor: "#fff", 
      angleLineColor: "rgba(163, 165, 93,0.8)", 
      scaleLineColor: "rgba(163, 165, 93,0.5)" 
     }); 
    } else { 
     inView = false; 
    } 
});

источник

2013-12-25 user3133586

просто замечание, где вы говорите 'newChart' , должно ли это быть «новой диаграммой»? –

работал для меня: да, как Яннис отметил, что это должно быть новое Chart (создание экземпляра объекта Chart) увидеть здесь и прокрутите вниз:

http://jsfiddle.net/HFS7v/

var radarChartData = { 
    labels: ["x", "x", "x", "x", "x"], 
    datasets: [{ 
     fillColor: "rgba(255, 97, 10, 0.5)", 
     strokeColor: "rgb(255, 97, 10)", 
     pointColor: "rgba(255, 255, 255, 1)", 
     pointStrokeColor: "rgba(255, 255, 255, 1)", 
     data: [48, 46, 47, 48, 38] 
    }] 

} 

var inView = false; 

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)); 
} 

$(window).scroll(function() { 
    if (isScrolledIntoView('#canvas')) { 
     if (inView) { 
      return; 
     } 
     inView = true; 
     new 
     Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, { 
      scaleShowLabels: false, 
      scaleShowLabelBackdrop: false, 
      scaleFontColor: "#fff", 
      pointLabelFontSize: 14, 
      pointLabelFontColor: "#fff", 
      angleLineColor: "rgba(163, 165, 93,0.8)", 
      scaleLineColor: "rgba(163, 165, 93,0.5)" 
     }); 
    } else { 
     inView = false; 
    } 
});

источник

2014-03-03 13:22:37 peevesy

Эй, и убедитесь, что на вашей странице вызывается библиотека JQuery (если вы скопировали код) Я бы сказал, что JQuery 2.0.2 хорош – peevesy

Спасибо, это работает, но когда вы просматриваете его на Android, рисует каждый раз, когда вы прокручиваете вверх и вниз, заставляя его увеличиваться до такой степени, что он полностью исчезает. – user3133586

Другая проблема - это точки на фактической карте - при изменении значений диаграммы (например, данные: [48, 46, 47, 48, 38 ] к данным: [48, 90, 47, 48, 38]), перерисованная диаграмма не соответствует цифрам – user3133586

Вы должны переместить свои скрипты

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script src="js/Chart.js"></script>

к вершине перед </head>, чтобы избежать возможного столкновения сценария и, как я сказал в своем комментарии, у вас есть опечатка:

newChart вместо правильного один new Chart

источник

2014-03-04 08:45:54

ChartJS и анимация радарной диаграммы

ответ

Смежные вопросы