Kendo-UI 中的 X 轴格式

Question

我已经开始使用 Telerik Kendo。我已经放了一些数据来显示。但是 X 轴在当前格式下是可读的。我该如何格式化它？

<base href="http://demos.telerik.com/kendo-ui/line-charts/date-axis">
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
    <body>
            <div id="example">
                <div class="demo-section k-content">
                    <div id="chart"></div>
                </div>
                    </div>
                </div>
                <script>
                    var stats = [
                        { x: 0, y: 0 },
                        { x: -3.88770423666098, y: 945.987507963258 },
                        { x: -4.24922990437403, y: 985.985280150689 },
                        { x: -2.91182688405784, y: 1080.9534171457 },
                        { x: 1.90405053850085, y: 1175.79962223412 },
                        { x: 7.80045299498725, y: 1270.59074063256 },

                    ];

                    function createChart() {
                        $("#chart").kendoChart({
                            title: {
                                text: "Units sold"
                            },
                            dataSource: {
                                data: stats
                            },
                            series: [{
                                type: "line",
                                field: "x",
                                categoryField: "y"
                            }],

                        });
                    }

                    $(document).ready(createChart);
                    $("#example").bind("kendo:skinChange", createChart);
                </script>
            </div>
    </body>

这是 jsfiddle： http://jsfiddle.net/nDS3S/23/

Answer 1

您可以使用面积图并根据需要设置标签格式：

function createChart() {
                $("#chart").kendoChart({
                    title: {
                        text: "Units sold"
                    },
                    dataSource: {
                        data: stats
                    },                        
                    categoryAxis: {                            
                        labels: {                                
                            step: 10,
                            format: "n2"
                        },
                    },
                    series: [{
                        type: "area",
                         line: {
                            style: "smooth"
                        },
                        field: "x",
                        categoryField: "y"
                    }], 
                });
 }

我已将类型设置为 area，行类型设置为 smooth，labels to skip 10 positions，并显示 two decimal digits。

我更新了你的 Fiddle

谢谢。

Kendo-UI 中的 X 轴格式

X-Axis Format in Kendo-UI

html

javascript

kendo-ui