Question

我需要在JSF页面中使用来自Java支持bean的数据构建Highcharts pie chart。

我需要知道必须传递的内容data的{{1}}属性：

series

我想它是一个数组数组。尝试传递series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }]，Map<String, Double>，List<Map<String, Double>>。最后一次尝试是地图列表（此代码位于使用Map<List<String>,List<Double>>注释的方法内，因此它在构造函数之后执行：

@PostConstruct

创建了所有getter和setter，但这些对象都不起作用，并且页面重新加载。

XHTML：

    this.mapPie = new HashMap<>();
    this.mapPie.put("Column 1", 3.0);
    this.mapPie.put("Column 2", 8.5);
    this.mapPie.put("Column 3", 6.0);
    this.mapPie.put("Column 4", 15.0);
    this.mapPie.put("Column 5", 9.0);
    this.mapPie.put("Column 6", 6.5);

    this.listMapPie = new ArrayList<>();
    mapPie.entrySet().stream().forEach((Map.Entry<String, Double> pairs) -> {
        String key = pairs.getKey();
        Double value = pairs.getValue();
        Map<String, Double> m = new HashMap<>();
        m.put(key, value);
        this.listMapPie.add(m);
    });

JavaScript的：

    <h:form>
        <p:panelGrid columns="2">
            <p:commandButton icon="ui-icon-extlink" value="Pie" onclick="gerarGraficoPizza('title', 'seriesName', #{chartBean.listMapPie})">
                <p:ajax event="click" update="pie" />
            </p:commandButton>
            <div jsf:id="pie" id="pie" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
        </p:panelGrid>
    </h:form>

编辑：

修改了Java代码，现在填充了地图列表，但页面中的结果相同：

        //<![CDATA[
        function gerarGraficoPizza(title, seriesName, seriesData) {
            $('#pie').highcharts({
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: 1, //null,
                    plotShadow: false
                },
                title: {
                    text: title
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{
                        type: 'pie',
                        name: seriesName,
                        data: seriesData
                    }]
            });
        }
        //]]>

Answer 1

那是JSON format。您尝试传递List#toString()和Map#toString()，就像它已经是JSON格式一样。这不对。你需要一台JSON打印机。在json.org页面的底部，您可以找到几个支持解析和打印的JSON API。其中一个是Google Gson。安装它（只需将JAR放在webapp的运行时类路径中，通常是放入/WEB-INF/lib）。

完成后，只需执行

listMapPieAsJson = new Gson().toJson(listMapPie);

onclick="gerarGraficoPizza('title', 'seriesName', #{chartBean.listMapPieAsJson})"

关于listMapPie的格式，你很接近。支持的格式仅列在their documentation中。假设您需要一个具有命名值的对象数组（如文档中所示，为3）。为了从Java端实现所需的JSON格式，您只需要知道这两个规则：

[]是JSON中的数组，可以通过List<T>或T[]呈现Java。
{}是JSON中的一个对象，可以在Java中由Map<K, V>或Bean呈现，这是一个带有getter / setter的真正的Javabean类。

您的错误是您将列名直接用作地图键，而不是将其与name一起设置为关键。

listMapPie = new ArrayList<>();
Map<String, Object> mapPie;

mapPie = new HashMap<>();
mapPie.put("name", "Column 1")
mapPie.put("y", 3.0);
listMapPie.add(mapPie);

mapPie = new HashMap<>();
mapPie.put("name", "Column 2")
mapPie.put("y", 8.5);
listMapPie.add(mapPie);

mapPie = new HashMap<>();
mapPie.put("name", "Column 3")
mapPie.put("y", 6.0);
listMapPie.add(mapPie);

// Etc..

listMapPieAsJson = new Gson().toJson(listMapPie);

另一种方法是创建一个简单的Javabean类：

public class Pie {
    private String name;
    private double y;
    // Add/generate c'tors/getters/setters/equals/hashCode.
}

这样你就可以做到

listMapPie = new ArrayList<>();
listMapPie.add(new Pie("Column 1", 3.0));
listMapPie.add(new Pie("Column 2", 8.5));
listMapPie.add(new Pie("Column 3", 6.0));
// Etc..
listMapPieAsJson = new Gson().toJson(listMapPie);

如何表示bean属性中的Highcharts数据

1 个答案: