2013-10-09 3 views
1

У меня есть простая гистограмма для моего приложения для Android. И я должен разработать его с помощью HighCharts. Все хорошо, за исключением анимации баров. Это не работает. Версия Android 4+ и я несколько устройств. Здесь источник Chart:анимация анимации HighCharts

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Highcharts Example</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function plot(data, data3) { 

     var chart = $('#container').highcharts(), 
     inCome = data, 
     lenObj = inCome.length, 
     series1 = [], 
     series2 = []; 

     /*for (var i = 0; i < lenObj; i++) { 
     series1.push([inCome[i], inCome[i]]); 
     series2.push([outCome[i], outCome[i]]); 
     }   */ 

     chart.series[0].setData(inCome, true); 
     chart.xAxis[0].setCategories(data3,true); 
     } 
     $(function() { 
     $('#container').highcharts({ 
     chart: { 
     type: 'bar' 
     }, 
     title: { 
     text: 'Count Max' 
     }, 
     subtitle: { 
     text: 'Посещаемость' 
     }, 
     xAxis: { 
     categories: [], 
     title: { 
     text: null 
     } 
     }, 
     yAxis: { 
     min: 0, 
     title: { 
     text: 'Человек', 
     align: 'high' 
     }, 
     labels: { 
     overflow: 'justify' 
     } 
     }, 
     tooltip: { 
     valueSuffix: ' millions' 
     }, 
     plotOptions: { 
     bar: { 
     dataLabels: { 
     enabled: true 
     } 
     } 
     }, 
     legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top', 
     x: -40, 
     y: 100, 
     floating: true, 
     borderWidth: 1, 
     backgroundColor: '#FFFFFF', 
     shadow: true 
     }, 
     credits: { 
     enabled: false 
     }, 
     series : [{ 
     name : 'Вошло', 
     data : [] 
     }] 
     }); 
     }); 
    </script> 
</head> 
<body> 
<script src="file:///android_asset/highcharts.js"></script> 
<script src="file:///android_asset/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

</body> 
</html> 

Initialization мой контроль:

wChart = (WebView)findViewById(R.id.wChart); 
     wChart.getSettings().setJavaScriptEnabled(true); 
     wChart.loadUrl("file:///android_asset/horizontalBarChart.html"); 

Как использовать таблицу:

private void Plot(ArrayList<Rating> ratings) 
    { 
     int[] rawData1 = new int[ratings.size()]; 
     String[] rawData2 = new String[ratings.size()]; 
     for (int i = 0; i < ratings.size(); i++) 
     { 
      rawData1[i] = ratings.get(i).Value; 
      rawData2[i] = ratings.get(i).NameEntity; 
     } 
     wChart.loadUrl("javascript:plot(" + gson.toJson(rawData1) + ","+ gson.toJson(rawData2) + ")"); 
    } 

Как я знаю, HighChart с помощью SVG, и он должен работать нормально на android 3+.

ответ

2

Вы дублировали анимации, так эти строки:

chart.series[0].setData(inCome, true); 
    chart.xAxis[0].setCategories(data3,true); 

Are виновниками. Установите значение false в первой строке и должно работать. Помните, когда вы делаете больше операций на диаграмме, установите redraw = true только для последней.

+0

Да, это поможет! Но бары не оживают, только фон – Vitaliy

+1

Как насчет смены порядка? Первые категории обновлений, затем установите новые данные. –

+0

Это была моя первая идея! Но это не помогает. Никакой анимации после изменения порядка – Vitaliy

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