0

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

我正在尝试为 y 轴设置一个最大值,有人知道我该如何实现吗?

目前,这些值似乎是根据我的图表中的值生成的,但我的数据需要有一个最大值和最小值为 15。

这是正在生成的内容。

在此处输入图像描述

我的代码如下:

  <!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>
4

3 回答 3

2

只需将“最大值:15,最小值:-15”添加到您的 valueAxis。这是您的限制示例

http://trykendoui.telerik.com/EgOs
于 2014-06-02T16:56:06.650 回答
1

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

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

于 2014-06-02T16:56:32.053 回答
0

valueAxis: { 最大值: MaxValue, }

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

于 2016-10-26T10:01:16.143 回答