如何在 HighCharts 中更改 "Pie Chart" 中的代码

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

哦！这是我的配音

    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

哈哈我看到白了space... 我检查了我的源代码！

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

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

Answer 1

Highcharts Series 采用 JSON 对象。您需要将 <%= request.getAttribute("irisData2") %> 转换为 json 对象，如下所示。

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

Answer 2

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

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

你在哪里设置 name = [] of strings，Y = []´ of Doubles。

这给你 [[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 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！

如何在 HighCharts 中更改 "Pie Chart" 中的代码

How to change code in "Pie Chart" in HighCharts

javascript

jsp

spring-mvc

highcharts

graph-visualization