我正在使用Highcharts和Bootstrap。
如何在每次点击标签时重新绘制图表?
请在下方找到演示......
class Generatepdf extends AsyncTask<Void, Void, String> {
@Override
protected void onPreExecute() {
showDialog(CONNECTING_PROGRESS_DIALOG);
}
@Override
protected String doInBackground(Void... params) {
String outRes;
File myInternalFile;
HttpTransportSE androidTransport = null;
try {
final String NAMESPACE = "http://ws.xxxx.xxx.com/";
final String METHOD_NAME = "getPDF";
final String SOAP_ACTION = "";
final String WSDL_URL = "http://localhost:8080/services/getpdf?wsdl";
SoapObject request = new SoapObject(NAMESPACE, METHOD_NAME);
PropertyInfo propOne = new PropertyInfo();
PropertyInfo propTwo = new PropertyInfo();
PropertyInfo propThree = new PropertyInfo();
PropertyInfo propFour = new PropertyInfo();
PropertyInfo propFive = new PropertyInfo();
PropertyInfo propSix = new PropertyInfo();
PropertyInfo propSeven = new PropertyInfo();
PropertyInfo propEight = new PropertyInfo();
PropertyInfo propNine = new PropertyInfo();
PropertyInfo propTen = new PropertyInfo();
PropertyInfo propEleven = new PropertyInfo();
PropertyInfo propTwelve = new PropertyInfo();
PropertyInfo propThirteen = new PropertyInfo();
//parameter one
File readpdfFile = new File( Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS), "/NewPDF_.pdf");
propOne.setName("arg0");
propOne.setValue(readpdfFile);
// propOne.setValue(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS) + "/NewPDF_");
// propOne.setValue(Environment.getExternalStorageDirectory().getPath() + "/PDF/NewPDF_.pdf");
request.addProperty(propOne);
//parameter two
propTwo.setName("arg1");
propTwo.setValue("xxxxxxxxxxxx (some 12 digit number)");
request.addProperty(propTwo);
//parameter three
propThree.setName("arg2");
propThree.setValue("ACuoAEB6ADmwAIAuADy4AIDCAEWkAIBwAFYwAIBbAFrAAIAqAF9UAIBnAGE8AEBZAGs8AEDmAGu4AIB3AG0wAIA2AHRQAEDFAHS0AIBEAIBMAIDjAIU0AEB6AIcwAIA4AIxYAICKAJCkAEBwAJ50AIBSAKhYAIBwAKoYAECBAKqMAICTAKykAICbALakAI");
request.addProperty(propThree);
//parameter four
propFour.setName("arg3");
propFour.setValue("name");
request.addProperty(propFour);
//parameter five
propFive.setName("arg4");
propFive.setValue("Test");
request.addProperty(propFive);
//parameter Six
propSix.setName("arg5");
propSix.setValue("cityname");
request.addProperty(propSix);
//parameter Seven
propSeven.setName("arg6");
propSeven.setValue("First");
request.addProperty(propSeven);
//parameter Eight
propEight.setName("arg7");
propEight.setValue("BottomRight");
request.addProperty(propEight);
//parameter Nine
propNine.setName("arg8");
propNine.setValue("null");
request.addProperty(propNine);
//parameter ten
propTen.setName("arg9");
propTen.setValue("Biometric");
request.addProperty(propTen);
//parameter Eleven
propEleven.setName("arg10");
propEleven.setValue("false");
request.addProperty(propEleven);
//parameter Twelve
propTwelve.setName("arg11");
propTwelve.setValue("device1341I089864");
request.addProperty(propTwelve);
//parameter Thirteen
propThirteen.setName("arg12");
propThirteen.setValue("true");
request.addProperty(propThirteen);
//soap method call
SoapSerializationEnvelope envelope2 = new SoapSerializationEnvelope(SoapEnvelope.VER11);
envelope2.setOutputSoapObject(request);
envelope2.implicitTypes = false;
androidTransport = new HttpTransportSE(WSDL_URL);
androidTransport.debug = true;
androidTransport.call(SOAP_ACTION, envelope2);
SoapObject response2 = (SoapObject) envelope2.bodyIn;
String requestDump = androidTransport.requestDump;
String responseDump = androidTransport.responseDump;
Log.i("", "Request: " + requestDump);
Log.i("", "Response: " + responseDump);
outRes = response2.toString();
Result= outRes;
Log.d("Result", Result);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return Result;
}
@Override
protected void onPostExecute(String response) {
removeDialog(CONNECTING_PROGRESS_DIALOG);
runOnUiThread(new Runnable() {
public void run() {
responseTxtView15.setText("RESPONSE " + Result);
}
});
}
}
$(function () {
// Everything in common between the charts
var commonOptions = {
colors: ['#f68936', '#70ba47', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
labels: {
style:{ color: '#bbb' },
},
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' },
//format:'{value}K',
},
tickInterval: 100,
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
//backgroundColor: "rgba(0 ,0, 0, 1)",
}],
// Area Chart
plotOptions: {
series: {
fillOpacity: 0.1
},
area: {
lineWidth: 1,
marker: {
lineWidth: 2,
symbol: 'circle',
fillColor: 'white',
radius:3,
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
// -----------------------------------------------------
$('.areaChartTwoWay').each(function() {
$(this).highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Date', },
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Forwards',
color: '#f68936',
marker: { lineColor: '#f68936', fillColor: 'white', },
data: [185, 290, 198, 220, 180, 140, 220, 335, 197, 240],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Unique opens',
color: '#70ba47',
marker: { lineColor: '#70ba47', fillColor: 'white', },
data: [90, 95, 98, 80, 70, 68, 85, 71, 64, 90],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}))
});
// -----------------------------------------------------
$('.areaChartOneWay').each(function() {
$(this).highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Date', },
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Forwards',
color: '#f68936',
marker: { lineColor: '#f68936', fillColor: 'white', },
data: [215, 325, 235, 380],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Unique opens',
color: '#70ba47',
marker: { lineColor: '#70ba47', fillColor: 'white', },
data: [15,53,42,38],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}))
});
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});
jQuery(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
jQuery( ".newChart" ).each(function() {
var chart = jQuery(this).highcharts();
chart.reflow();
});
})
body{margin:20px;}
.tab-content{padding-top:30px;border:1px solid #ddd;border-top:none;}
.nav{padding-left:50px;}