Highcharts - 单击引导选项卡后重置图表而不更改图表值

时间:2016-10-21 11:09:21

标签: twitter-bootstrap highcharts bootstrap-tabs

我正在使用Highcharts和Bootstrap。

如何在每次点击标签时重新绘制图表?

请在下方找到演示......

http://jsfiddle.net/et7Lvg6c/

    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;}

0 个答案:

没有答案