Android使用highcharts实现可左右滑动的折线图

来源：互联网发布：mastercam三维编程步骤编辑：程序博客网时间：2024/05/21 12:49

highcharts官网：https://www.hcharts.cn/

最近在做一个希望在Android端显示的折线图，所以开始接触了一下highcharts，发现它有很强大的功能，我主要是想实现可以左右滑动的折线图，在对比了highcharts和highst之后，发现不希望出现highstock底端的伸缩滑块，于是还是选择了highcharts

步骤：

1.在官网找到符合左右滑动要求的demo，https://code.hcharts.cn/temp/Ee9mm0/share/result

可以用自己的手机先扫描一下二维码，看是不是符合要求的demo

2.进入编辑代码模式，https://code.hcharts.cn/temp/Ee9mm0/，修改成你所需要的样式

3.然后在Android工程中，新建文件目录路径如下，为了防止加载web端的js很慢，我们把需要用到的js下载下来，

2.新建history.html，本demo中只用到了history.html，js文件夹中存放html所需要的js文件：

html的内容如下:

<!doctype html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <style>.mCSB_draggerRail {        display: none;    }        .mCustomScrollBox {        overflow:hidden;    }    </style>    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>    <script type="text/javascript" src="js/highcharts.js"></script>    <script type="text/javascript" src="js/jquery.mCustomScrollbar.min.js"></script></head><body><div id="scrollbar" style="min-width:400px;min-height:300px;">    <div id="container" style="width:1000px;height:300px;"></div></div><script type="text/javascript" src="js/history.js" charset="utf-8"></script></body></html>

其中jquery.mCustomScrollbar.min.js

本来在给出的html文件中没有引用，但是如果不引用这个文件，最后会导致滑动的界面中y轴刻度线不能始终固定在屏幕左侧，并提示.mCustomScrollbar is not a function，点击右侧选中的区域无法显示点击的灰色条。

所以最后我查了网页的源代码，发现是有引用这个文件的，所以最终还是下载了

</script>

根据以上三个https的路径，复制代码，创建jquery-1.8.3.min.js、highcharts.js、jquery.mCustomScrollbar.min.js三个js文件，把这三个文件放到js文件夹中。

3.新建history.js，代码如下，同样放到js文件夹中

$(function() {    $('#scrollbar').mCustomScrollbar({        axis:"x",        callbacks:{            whileScrolling:function() {                adjustXY(this);            }        }    });    adjustXY($('#scrollbar')[0]);    function adjustXY(elm) {        // 滚动条位置        var scrollLeft = -elm.mcs.left;        // 外壳宽度        var width = $(elm).width();        // 滑动块宽度        var sliderWidth = elm.mcs.content.width();        // 右边y轴的位置        var rightyXPos = -(sliderWidth - width - scrollLeft);        var legendX = scrollLeft+chart.yAxis[0].axisTitle.element.getBBox().width + 10;        // 左侧y轴刻度位置        $(chart.yAxis[0].labelGroup.element).css('transform', 'translateX('+scrollLeft+'px)');        // 左侧y轴单位位置        $(chart.yAxis[0].axisGroup.element).css('transform', 'translateX('+scrollLeft+'px)');        // 中间线条说明块        $(chart.legend.group.element).css('transform', 'translateX('+legendX+'px)');    }});var chart = new Highcharts.Chart('container', {    legend: {        align: 'left',        verticalAlign: 'top',        x: 70,        y: -12,        itemDistance: 15,        itemStyle: {color:'#666', fontWeight:'normal' }    },    title: {text: ''},    credits: {enabled: false},    exporting: {            enabled: false        },    xAxis: [{        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],        crosshair: true,        tickmarkPlacement: 'on',        tickPosition: 'inside',        tickLength: 3,        labels: {            style: {                color: '#999'            }        }    }],    chart:{    },    scrollbar:{        enabled:false    },    yAxis: [{        gridLineDashStyle: 'Dash',        gridLineColor: '#c7c7c7',        gridLineWidth: 1,        labels: {            align: 'left',            x: 0,            y: -2,            style: {                color: '#999'            }        },        title: {            align: 'high',            offset: -20,            text: 'value',            rotation: 0,            y: -18,            style: {                color: '#999999'            }        }    }],    tooltip: {        shared: true    },    series: [{        name: '二手房',        type: 'line',        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: Highcharts.getOptions().colors[3],        tooltip: {            valueSuffix: '万/㎡'        },        marker: {            symbol: 'circle',            lineWidth: 2,            lineColor: Highcharts.getOptions().colors[3],            fillColor: 'white'        }      }]});

3.在lalyout中：加入webview<WebView    android:id="@+id/wb_history"    android:layout_width="wrap_content"    android:layout_height="wrap_content"></WebView>

在Activity中：

onCreate中加入代码：

hisWebView = (WebView) findViewById(R.id.wb_history);

enableJS();loadUrl("file:///android_asset/history.html");
并新建enableJS()和loadUrl()这两个函数。

private void enableJS(){    // 启用支持javascript    WebSettings settings = hisWebView.getSettings();    settings.setJavaScriptEnabled(true);    settings.setCacheMode(WebSettings.LOAD_DEFAULT);    settings.setDomStorageEnabled(true);    settings.setAppCacheMaxSize(8 * 1024 * 1024);    settings.setAllowFileAccess(true);    settings.setAppCacheEnabled(true);    hisWebView.setWebContentsDebuggingEnabled(true);    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {        hisWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);    }    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {        settings.setLoadsImagesAutomatically(true);    } else {        settings.setLoadsImagesAutomatically(false);    }}private void loadUrl(final String url) {    runOnUiThread(new Runnable() {        @Override        public void run() {            hisWebView.loadUrl(url);        }    });}

阅读全文

0 0