如何更改HighCharts中的“饼图”中的代码

问题描述：

我曾经用于Spring MVC。这是我的Java服务如何更改HighCharts中的“饼图”中的代码

@Override 
public ArrayList<SampleVO1> getAvgPetalBySpecies3() { 
    ArrayList<SampleVO1> irisList = new ArrayList<SampleVO1>(); 
    try { 
     REXP result = rEngine.eval("(ming <- tapply(iris$Petal.Length, iris$Species, mean))"); 
     REXP result1 = rEngine.eval("names(ming)"); 

     SampleVO1 sample1 = new SampleVO1(); 
     sample1.setName(result1.asStringArray()); 
     sample1.setY(result.asDoubleArray()); 
     irisList.add(sample1); 

    } catch (Exception e) { 
     logger.error(e.getMessage()); 
     throw new RuntimeException(e); 
    } 
    return irisList; 
}

哦！这是我的VO

private String[] name; 
    private double[] y;

，这是我的控制器

@RequestMapping("/analytics/iris3") 
public String getAvgPetalbySpecies3(Model model) { 
    ArrayList<SampleVO1> irisList = analyticsService.getAvgPetalBySpecies3(); 
    Gson gson = new Gson(); 
    String irisData = gson.toJson(irisList); 
    model.addAttribute("irisData2", irisData); 

    return "analytics/visual"; 
}

最后，这是我的JSP

<script type="text/javascript"> 
$(function() { 
Highcharts.chart('pie', { 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
    }, 
    title: { 
     text: '' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true 
      }, 
      showInLegend: true 
     } 
    }, 

    series: 
      <%= request.getAttribute("irisData2") %>, 

}); 
}); 
</script>

enter image description here

笑我看到白色的空间... 我检查了我的源代码！

series: 
      [{"name":["setosa","versicolor","virginica"],"y":[1.462,4.26,5.552]}],

我以为我收到不错的虹膜数据！但我highCharts不喜欢那个... 我如何解决我的代码...？

您的系列数据格式不正确。请查看[系列。数据]（http://api.highcharts.com/highcharts/series%3Cpie%3E.data），了解如何正确格式化数据。 – ewolden

是啊...我知道我读了高画......但如何更改我的service.java ... – Ming9Mang9

答

您目前有以下代码为您的数据添加值。

SampleVO1 sample1 = new SampleVO1(); 
sample1.setName(result1.asStringArray()); 
sample1.setY(result.asDoubleArray()); 
irisList.add(sample1);

如果您设置名称=字符串[]和双打的Y = []´。

这给你[[name, name, name],[y,y,y]]

相反，你应该既可以通过在你的列表中元素的个数加入或循环如下：

for(int i = 1; i < result.length(); i = i + 1) { 
    SampleVO1 sample1 = new SampleVO1(); 
    sample1.setName(result1[i].asStringArray()); 
    sample1.setY(result[i].asDoubleArray()); 
    irisList.add(sample1); 
}

，这将给你喜欢[[name, y], [name, y], [name, y]]列表。我相信有更好的方法来在java中添加两个数组。

无论如何，你到底应该设有带JSON格式列表向上如：

[{name: 'setosa', y: 1.462}, {name: 'versicolor', y: 4.26}]

WHOA！我成功了我的饼图！我改变了我的代码在你的建议，然后我改变了我的价值对象和一些编辑我的jsp。非常感谢你！ – Ming9Mang9

答

Highcharts Series采用JSON对象。您需要将<％= request.getAttribute（“irisData2”）％>转换为json对象，如下所示。

var irisData2_string = '<%= request.getAttribute("irisData2") %>'; 
var obj = JSON.parse(irisData2_string);

检查元素以查看控制台中的确切错误 –

答

谢谢大家！

我在highCharts中编写完整的饼图代码！首先，我展示我的ValueObject！

public class SampleVO1 { 

private String name; 
private double y; 

public String getName() { 
    return name; 
} 
public void setName(String resultList1) { 
    this.name = resultList1; 
} 
public double getY() { 
    return y; 
} 
public void setY(double resultList) { 
    this.y = resultList; 
} 
}

二，我的服务！

@Service 
public class AnalyticsService implements IAnalyticsService { 

private static final Logger logger = 
LoggerFactory.getLogger(AnalyticsService.class); 

@Autowired 
Rengine rEngine; 

... 
    @Override 
public ArrayList<SampleVO1> getAvgPetalBySpecies3() { 
    ArrayList<SampleVO1> irisList = new ArrayList<SampleVO1>(); 
    try { 
     REXP result = rEngine.eval("(ming <- tapply(iris$Petal.Length, iris$Species, mean))"); 
     REXP result1 = rEngine.eval("names(ming)"); 

     double resultList[] = result.asDoubleArray(); 
     String resultList1[] = result1.asStringArray(); 

     for(int i=0; i<resultList.length; i++) { 
      SampleVO1 sample1 = new SampleVO1(); 
      sample1.setName(resultList1[i]); 
      sample1.setY(resultList[i]); 
      irisList.add(sample1); 
     } 

    } catch (Exception e) { 
     logger.error(e.getMessage()); 
     throw new RuntimeException(e); 
    } 
    return irisList; 
}

第三，我的控制器〜

@Controller 
public class AnalyticsController { 

@Autowired 
IAnalyticsService analyticsService; 

@Autowired 
IUploadFileService uploadFileService; 

... 
    @RequestMapping("/analytics/iris3") 
public String getAvgPetalbySpecies3(Model model) { 
    ArrayList<SampleVO1> irisList = 
analyticsService.getAvgPetalBySpecies3(); 
    Gson gson = new Gson(); 
    String irisData = gson.toJson(irisList); 
    model.addAttribute("irisData2", irisData); 

    return "analytics/visual"; 
}

最后，我的可视化JSP！

<script type="text/javascript"> 
$(function() { 
Highcharts.chart('pie', { 
    chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
    }, 

    title: { 
     text: 'pie is ApplePie' 
    }, 
    tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true 
      }, 
      showInLegend: true 
     } 
    }, 
    series: [{name: 'Species', 
      colorByPoint : true, 
      data :<%= request.getAttribute("irisData2") %> 
    }] 
}); 
}); 
</script>

我希望这些代码可以帮助您编辑您的highCharts！

如何更改HighCharts中的“饼图”中的代码

相关推荐