javascript - 字符串值未在 Highcharts 中呈现

Question

我使用高图表 js 实现了图表，我的服务类返回一个包含图形数据的对象，其中一个属性返回月份和年份，如“2018 年 12 月”或“2018 年 12 月”，但高图表会引发错误渲染它并显示“December”后未声明和“2018”意外令牌。

我的问题是如何以格式显示月份名称，例如“2018 年 12 月”，它在图中看起来很奇怪，目前我使用的是默认值 201812

 <script type="text/javascript">
                            $(function () {
                            $('#container').highcharts({
                            chart: {
                            type: 'column'
                            },
                                    title: {
                                    text: 'Monthly Salary Statistics'

                                    xAxis: {
                                    categories: [${boardData.attDashboardData.valueBean.val1}],
                                            crosshair: true
                                    },
                                    yAxis: {
                                    min: 0,
                                            title: {
                                            text: 'Amount (INR)'
                                            }
                                    },
                                    tooltip: {
                                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                            '<td style="padding:0"><b>{point.y:.1f} INR</b></td></tr>',
                                            footerFormat: '</table>',
                                            shared: true,
                                            useHTML: true
                                    },
                                    plotOptions: {
                                    column: {
                                    pointPadding: 0.2,
                                            borderWidth: 0
                                    }
                                    },
                                    series: [{
                                    name: 'Gross Earning',
                                            data: [${boardData.attDashboardData.valueBean.val3} ]

                                    }, {
                                    name: 'Gross Deduction',
                                            data: [${boardData.attDashboardData.valueBean.val2}]

                                    }, {
                                    name: 'Net Pay',
                                            data: [${boardData.attDashboardData.valueBean.val4}]

                                    }]
                            });

    });

                        </script>

                        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

我认为 highchart 无法理解 data[] 中的字符串值，请帮助我

服务等级

 public TwoValueBeanVer2 getMothlySalaryStatistics(final String yearMonth, final String refId) {
        TwoValueBeanVer2 bean = new TwoValueBeanVer2();
        String query = "        SELECT "
                + "            YEAR_MONTH yearMonth, "
                + "            count(distinct EMPLOYEE_ID) tot_emp, "
                + "            SUM(net_salary) net_salary, "
                + "            SUM(gross_earning) gross_earn, "
                + "            SUM(gross_deduction) gros_deduct "
                + "            "
                + "        FROM "
                + "            employee_salary_summary "
                + "        WHERE EMPLOYEE_ID NOT IN (1,2)  "
                + " AND REFERENCE_ID =" + refId
                + " AND YEAR_MONTH=" + yearMonth
                + " group by YEAR_MONTH ";

        List<AttOfficerDashboardDTO> list = getNamedParameterJdbcTemplate().query(query, new RowMapper<AttOfficerDashboardDTO>() {

            @Override
            public AttOfficerDashboardDTO mapRow(ResultSet rs, int i) throws SQLException {
                AttOfficerDashboardDTO dto = new AttOfficerDashboardDTO();
                dto.setTotEmp(rs.getInt("tot_emp"));
                dto.setGrossEarning(rs.getDouble("gross_earn"));
                dto.setGrossDeduction(rs.getDouble("gros_deduct"));
                dto.setGrossDeduction(rs.getDouble("gros_deduct"));
                dto.setNetPay(rs.getDouble("net_salary"));
                dto.setYearMonth(rs.getString("yearMonth"));
                return dto;
            }
        });
        if (list.size() > 0) {
            List<String> val1 = new ArrayList<>();
            List<String> val2 = new ArrayList<>();
            List<String> val3 = new ArrayList<>();
            List<String> val4 = new ArrayList<>();

            for (AttOfficerDashboardDTO graphData : list) {
                val1.add(graphData.getYearMonth());
                val2.add(String.valueOf(graphData.getGrossDeduction()));
                val3.add(String.valueOf(graphData.getGrossEarning()));
                val4.add(String.valueOf(graphData.getNetPay()));
            }
            bean.setVal1(StringProcessorUtil.arrayToString(val1.toArray(new String[]{}), null));
            bean.setVal2(StringProcessorUtil.arrayToString(val2.toArray(new String[]{}), null));
            bean.setVal3(StringProcessorUtil.arrayToString(val3.toArray(new String[]{}), null));
            bean.setVal4(StringProcessorUtil.arrayToString(val4.toArray(new String[]{}), null));

        }
        return bean;

    }
}

我的 DOMAIN CLASS 生成对应的 String vlauemonthYear

public void setYearMonth(String yearMonth) {
        this.yearMonth = yearMonth;
        if (yearMonth != null) {
            String year = yearMonth.substring(0, 4);
            String month = yearMonth.substring(4, 6);
            monthYearStr = DateUtility.getMonthNameV2(month) + "," + year;
        }
    }

和 getMonthNAmeV2() 方法

 public static String getMonthNameV2(String month) {
        String m = "";
        switch (month) {
            case "01":
                m = "January";
                break;
            case "02":
                m = "February";
                break;
            case "03":
                m = "March";
                break;
            case "04":
                m = "April";
                break;
            case "05":
                m = "May";
                break;
            case "06":
                m = "June";
                break;
            case "07":
                m = "July";
                break;
            case "08":
                m = "August";
                break;
            case "09":
                m = "September";
                break;
            case "10":
                m = "October";
                break;
            case "11":
                m = "November";
                break;
            case "12":
                m = "December";
                break;
            default:
                m = "Invalid Month";
                break;
        }
        return m;
    }

标签： javascriptspring-mvchighcharts