HighCharts 动画 android答案

【问题标题】：HighCharts animation androidHighCharts 动画 android
【发布时间】：2023-03-22 19:11:02
【问题描述】：

我的 android 应用程序有简单的条形图。而且我必须使用 HighCharts 来开发它。一切都很好，除了酒吧的动画。这是行不通的。 android 4+ 的版本和我的一些设备。这里图表来源：

<!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>

初始化我的控件：

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+ 版本上正常工作。

【问题讨论】：

标签： java javascript android svg highcharts

【解决方案1】：

你有重复的动画，所以这行：

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

是罪魁祸首。在第一行设置 false 并且应该可以工作。请记住，在对图表进行更多操作时，仅对最后一个设置 redraw=true。

【讨论】：

是的，有帮助！但条不动画，只有背景
换个顺序怎么样？首先更新类别，然后设置新数据。
这是我的第一个想法！但这无济于事。更改顺序后没有任何动画
我想到的最后两件事：1）将Highcharts升级到3.0.6版本。 2）尝试删除以前的系列并添加新的而不是设置新数据。