Question

我正在使用Kendo UI的条形图进行一些数据可视化。

我正在尝试为y轴设置最大值，是否有人知道如何实现此功能？

目前，值似乎是根据我的图表中的值生成的，但我的数据需要的最大值和最小值为15.

这是正在生成的内容。

enter image description here

我的代码如下：

  <!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/bar-charts/column">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
</head>
<body>
  <style>
    #dd {
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */
}
  </style>
    <div id="example">
    <div class="demo-section k-content">
        <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "What should I call this graph"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "XX",
                    data: [13.907]
                }, {
                    name: "XX",
                    data: [-4.743]
                }, {
                    name: "XX",
                    data: [-7.210]
                },{
                    name: "XX",
                    data: [9.988]
                }],
                valueAxis: {
                    labels: {
                        format: "#.#"
                    },
                    line: {
                        visible: false
                    },
                    axisCrossingValue: 0
                },
                categoryAxis: {
                    categories: [2013],
                    line: {
                        visible: false
                    },
                    labels: {
                        padding: {top: 165}
                    }
                },
                tooltip: {
                    visible: true,
                    format: "{0}%",
                    template: "#= series.name #: #= value #"
                }
            });
        }

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


</body>
</html>

Answer 1

只需将“max：15，min：-15”添加到valueAxis即可。这是你的限制

的例子

http://trykendoui.telerik.com/EgOs

Answer 2

回答我自己的问题......

我添加了修改以下代码：valueAxis: { min: -15, // added this line max: 15, // added this line labels: { format: "#.#" }, line: { visible: false }, axisCrossingValue: 0 },

Answer 3

valueAxis：{ max：MaxValue， }

// MaxValue是包含最大值的变量

Kendo UI数据访问 - 条形图 - 最小/最大Y轴值

3 个答案: