Android使用highcharts实现可左右滑动的折线图
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的内容如下:
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，点击右侧选中的区域无法显示点击的灰色条。
所以最后我查了网页的源代码，发现是有引用这个文件的，所以最终还是下载了
根据以上三个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); } }); }