Highcharts 图表未在同一 Android activity 上重新创建

Question

我在我的项目中使用 Android Highcharts 图表库。

https://github.com/highcharts/highcharts-android

我有四个 Buttons 天、小时、分钟、周 ，如下图所示。

当 Activity 第一次启动时它工作正常，图表也正确显示所有事情都工作正常但是当 API 再次点击相同的 activity 响应时我得到正确但图表没有重新创建。

我检查了里面的 LOG callGraphView() 日志打印正确但在图表中没有检测到变化。

我也没有 API 检查过它，但同样的事情又发生了。在 Web/iOS 它工作正常。

下面是这张图的URL：

https://www.highcharts.com/android/demo/line-basic

下面是我的代码：

private void JsonRequestOrderVelocity(String dmhw) {
    utils.showDialog();

    String url = Constants.ORDER_VELOCITY_API+"stemSku=com-1&type="+dmhw+"&warehouse_id="+whareHouse;
    Log.e("URL", "" + url);

    JsonObjectRequest request = new JsonObjectRequest(url, null,
            response -> {
                Log.e("onResponse",""+response);
                try {
                    Gson gson = new Gson();
                    Type listType = new TypeToken<OrderVelocityPojo>() {}.getType();
                    orderVelocityPojo = gson.fromJson(response.toString(), listType);

                    if(dmhw.equalsIgnoreCase("day")){
                        callGraphView("Daily");
                    }else if(dmhw.equalsIgnoreCase("hour")){
                        callGraphView("Hourly");
                    }else if(dmhw.equalsIgnoreCase("minute")){
                        callGraphView("Minute-wise");
                    }else{
                        callGraphView("Weekly");
                    }
                        ...................
}

图形调用方法：

 private void callGraphView(String timeType) {
    Log.e("TIMETYPE",""+timeType);
    chartView.setWillNotDraw(false);
    HIOptions options = new HIOptions();

    HIChart chart = new HIChart();
    chart.type = "line";
    options.chart = chart;

    HITitle title = new HITitle();
    title.text = "("+getIntent().getStringExtra("WHARE_HOUSE_NAME")+") "+timeType+" Sales Trend";
    options.title = title;

    HISubtitle subtitle = new HISubtitle();
    subtitle.text = "Source: thesolarfoundation.com";
    options.subtitle = subtitle;

    HIYAxis yaxis = new HIYAxis();
    yaxis.title = new HITitle();
    yaxis.title.text = "Quantity Sold";
    options.yAxis = new ArrayList<>(Collections.singletonList(yaxis));

    HIXAxis xaxis = new HIXAxis();
    xaxis.categories=orderVelocityPojo.getRange();
    options.xAxis = new ArrayList<>(Collections.singletonList(xaxis));

    HILegend legend = new HILegend();
    legend.layout = "vertical";
    legend.align = "right";
    legend.verticalAlign = "middle";
    options.legend = legend;

    HIPlotOptions plotoptions = new HIPlotOptions();
    plotoptions.series = new HISeries();
    plotoptions.series.label = new HILabel();
    plotoptions.series.label.connectorAllowed = false;;
    plotoptions.series.pointStart = 2010;

    HILine line1 = new HILine();
    line1.name = "Actual Sales("+orderVelocityPojo.getFromDate()+" to "+orderVelocityPojo.getToDate()+")";
    line1.data = count;

    HILine line2 = new HILine();
    line2.name = "Inventory Projected";
    line2.visible=false;
    line2.data = null;

    HILine line3 = new HILine();
    line3.name = "Previous Day Sales("+orderVelocityPojo.getPreviousIntervalFromDateDay()+" to "+orderVelocityPojo.getPreviousIntervalToDateDay()+")";
    line3.visible=false;
    line3.data = previousCountDay;

    HILine line4 = new HILine();
    line4.name = "Previous Week Sales("+orderVelocityPojo.getPreviousIntervalFromDateWeek()+" to "+orderVelocityPojo.getPreviousIntervalToDateWeek()+")";
    line4.visible=false;
    line4.data = previousCountWeek;

    HILine line5 = new HILine();
    line5.name = "Previous Month Sales("+orderVelocityPojo.getPreviousIntervalFromDateMonth()+" to "+orderVelocityPojo.getPreviousIntervalToDateMonth()+")";
    line5.visible=false;
    line5.data = previousCountMonth;

    HILine line6 = new HILine();
    line6.name = "Previous 3 Month Sales("+orderVelocityPojo.getPreviousIntervalFromDate3Month()+" to "+orderVelocityPojo.getPreviousIntervalToDate3Month()+")";
    line6.visible=false;
    line6.data = previousCount3_Month;

    HILine line7 = new HILine();
    line7.name = "Previous 6 Month Sales("+orderVelocityPojo.getPreviousIntervalFromDate6Month()+" to "+orderVelocityPojo.getPreviousIntervalToDate6Month()+")";
    line7.visible=false;
    line7.data = previousCount6_Month;

    HILine line8 = new HILine();
    line8.name = "Previous Years Sales("+orderVelocityPojo.getPreviousIntervalFromDateYear()+" to "+orderVelocityPojo.getPreviousIntervalToDateYear()+")";
    line8.visible=false;
    line8.data = previousCountYear;

    HILine line9 = new HILine();
    line9.name = "MDay 2016 Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDay()+" to"+orderVelocityPojo.getPreviousIntervalToMothersDay()+")";
    line9.visible=false;
    line9.data = previousCountMothersDay;

    HILine line10 = new HILine();
    line10.name = "MDay 2016(-1) Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDayMinusOne()+" to "+orderVelocityPojo.getPreviousIntervalToMothersDay()+")";
    line10.visible=false;
    line10.data = previousCountMothersDayMinusOne;

    HILine line11 = new HILine();
    line11.name = "MDay 2017 Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDay2017()+" to "+orderVelocityPojo.getPreviousIntervalToMothersDay2017()+")";
    line11.visible=false;
    line11.data = previousCountMothersDay2017;

    HILine line12 = new HILine();
    line12.name = "MDay 2017 (-1)Week Sales("+orderVelocityPojo.getPreviousIntervalFromMothersDay2017MinusOne()+" to "+orderVelocityPojo.getPreviousIntervalToMothersDay2017MinusOne()+")";
    line12.visible=false;
    line12.data = previousCountMothersDay2017MinusOne;

    HILine line13 = new HILine();
    line13.name = "VDay 2017 Week Sales("+orderVelocityPojo.getPreviousIntervalFromValentinesDay()+" to "+orderVelocityPojo.getPreviousIntervalToValentinesDay()+")";
    line13.visible=false;
    line13.data = previousCountValentinesDay;

    HILine line14 = new HILine();
    line14.name = "VDay 2017 (-1) Week Sales("+orderVelocityPojo.getPreviousIntervalFromValentinesDayMinusOne()+" to "+orderVelocityPojo.getPreviousIntervalToValentinesDayMinusOne();
    line14.visible=false;
    line14.data = previousCountValentinesDayMinusOne;

    HILine line15 = new HILine();
    line15.name = "Inventory Received";
    line15.visible=false;
    line15.data = null;


    HIResponsive responsive = new HIResponsive();

    HIRules rules1 = new HIRules();
    rules1.condition = new HICondition();
    rules1.condition.maxWidth = 500;
    HashMap<String, HashMap> chartLegend = new HashMap<>();
    HashMap<String, String> legendOptions = new HashMap<>();
    legendOptions.put("layout", "horizontal");
    legendOptions.put("align", "center");
    legendOptions.put("verticalAlign", "bottom");
    chartLegend.put("legend", legendOptions);
    rules1.chartOptions = chartLegend;
    responsive.rules = new ArrayList<>(Collections.singletonList(rules1));
    options.responsive = responsive;
    options.series = new ArrayList<HISeries>(Arrays.asList(line1,line2,line3,line4,line5,line6,line7,line8,line9,line10,line11,line12,line13,line14,line15));
    chartView.options = options;
}

Answer 1

第一个解决方案：

我们可以像这样使用 HIChartView 对象：chartView.reload() 在每个请求之后。

完整代码：

 dayButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "day");
                chartView.reload();
            }
        });
        weekButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "week");
                chartView.reload();
            }
        });
        monthButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "month");
                chartView.reload();
            }
        });
        yearButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                manager.updateChart(chartView, c, "area", "DataSteps.json", "year");
                chartView.reload();
            }
        });

第二种解法：

我自己解决了这个问题，我在 Activity 内创建了一个片段用于图形，我也在 API 内用 highcharts-graphView 击中了片段。

因此，当我点击“日”、“小时”、“分钟”、“星期”按钮中的任何一个时，它每次都会创建片段并显示图表。

这是代码：

 @Override
public void onClick(View view) {
    if(view.getId()==R.id.btndayOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"day");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        day.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocity);
        hour.setBackgroundResource(R.color.orderVelocityLight);
        minute.setBackgroundResource(R.color.orderVelocityLight);
        week.setBackgroundResource(R.color.orderVelocityLight);
    }
    else if(view.getId()==R.id.btnHourOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"hour");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        hour.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocityLight);
        hour.setBackgroundResource(R.color.orderVelocity);
        minute.setBackgroundResource(R.color.orderVelocityLight);
        week.setBackgroundResource(R.color.orderVelocityLight);
    }
    else if(view.getId()==R.id.btnMinuteOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"minute");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        minute.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocityLight);
        hour.setBackgroundResource(R.color.orderVelocityLight);
        minute.setBackgroundResource(R.color.orderVelocity);
        week.setBackgroundResource(R.color.orderVelocityLight);
    }
    else if(view.getId()==R.id.btnWeekOV){

        OrderVelocityFragment fragment = new OrderVelocityFragment().newInstance(whareHouse,whareHouseName,"week");
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.content_frame_home, fragment)
                .commit();

        week.setTextColor(Color.WHITE);
        day.setBackgroundResource(R.color.orderVelocityLight);
        hour.setBackgroundResource(R.color.orderVelocityLight);
        minute.setBackgroundResource(R.color.orderVelocityLight);
        week.setBackgroundResource(R.color.orderVelocity);
    }
}

Highcharts 图表未在同一 Android activity 上重新创建

Highcharts Graph not recreating on same Android activity

java

android

highcharts

android-highcharts