如何更改HighCharts中的「餅圖」中的代碼

Question

我曾經用於Spring MVC。這是我的Java服務

@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不喜歡那個... 我如何解決我的代碼...？

Answer 1

您目前有以下代碼爲您的數據添加值。

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

Answer 2

Highcharts Series採用JSON對象。您需要將<％= request.getAttribute（「irisData2」）％>轉換爲json對象，如下所示。

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

Answer 3

謝謝大家！

我在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！