【问题标题】:How to get the month names in kendo chart by using function如何使用函数获取剑道图表中的月份名称
【发布时间】:2013-07-11 06:42:11
【问题描述】:

如何创建一个函数来获取 Jan,feb.. 在剑道图表 x 轴上显示的月份。

var internetUsers = [ {
                            "Month": "1",
                            "year": "2010",
                            "value": 1
                        }, {
                            "Month": "2",
                            "year": "2010",
                            "value": 2
                        }, {
                            "Month": "3",
                            "year": "2010",
                            "value": 3
                        }, {
                            "Month": "4",
                            "year": "2010",
                            "value": 4

                        }, {
                            "Month": "5",
                            "year": "2010",
                            "value": 5
                        },
                                        {
                            "Month": "6",
                            "year": "2010",
                            "value": 6
                        }, {
                            "Month": "7",
                            "year": "2010",
                            "value": 7
                        }, {
                            "Month": "8",
                            "year": "2010",
                            "value": 8

                        }];

                    function createChart() {
                        $("#chart").kendoChart({
                            theme: $(document).data("kendoSkin") || "default",
                            dataSource: {
                                data: internetUsers,
                                group: {
                                 field: "year"
                                },
                              sort: {
                                    field: "year",
                                    dir: "asc"
                                }
                            },
                            title: {
                                text: "Sales"
                            },
                            legend: {
                                position: "bottom"
                            },
                            seriesDefaults: {
                                type: "column"

                            },
                            series: [{

                                field: "value"


                            }],
                          valueAxis: {
                                labels: {
                                    format: "{0}$"
                                },

                                line: {
                                    visible: false
                                },
                                axisCrossingValue: 0
                            },
                            categoryAxis: {
                                field: "Month"

                            },

                            tooltip: {
                                visible: true,
                                format: "{0}%",
                                template: "#= series.name #: #= value #"
                            }
                        });
                    }

                    $(document).ready(function() {
                        setTimeout(function() {
                            // Initialize the chart with a delay to make sure
                            // the initial animation is visible
                            createChart();

                            $("#example").bind("kendo:skinChange", function(e) {
                                createChart();
                            });
                        }, 400);
                    });
                </script>

【问题讨论】:

    标签: kendo-ui kendo-dataviz


    【解决方案1】:

    您可以使用 kendoui 的时间格式功能:

    kendo.toString(new Date(2000, value, 1), "MMMM"); // if value = 9, it would output September
    

    查看 kendoui 的日期格式页面。这是非常有帮助的。 http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateformatting

    【讨论】:

      【解决方案2】:

      首先添加一个数组来保存月份名称,如下所示:

      var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"];
      

      然后修改categoryAxis来使用这个数组

      categoryAxis: {
          field: "Month",
          labels: {
              template: "#=monthNames[value - 1]#"
          },
      },
      

      【讨论】:

      • 但没有按顺序排列月份
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-21
      • 1970-01-01
      相关资源
      最近更新 更多