Kendo UI Data Vis - 条形图 - 最小/最大 Y 轴值答案

【问题标题】：Kendo UI Data Vis - Bar Chart - Min/Max Y-Axis ValueKendo UI Data Vis - 条形图 - 最小/最大 Y 轴值
【发布时间】：2014-06-02 16:40:44
【问题描述】：

我正在使用 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>

【问题讨论】：

我已经读到将：majorUnit: 1, min: 0, max: 15 添加到 valueAxis 应该可以工作，但我似乎无法正确地合并它。

标签： javascript jquery kendo-ui kendo-asp.net-mvc kendo-chart

【解决方案1】：

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

http://trykendoui.telerik.com/EgOs

【讨论】：

谢谢，好时机，我也刚刚回答了我自己的问题。

【解决方案2】：

回答我自己的问题...

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

【讨论】：

【解决方案3】：

值轴：{ 最大值：最大值， }

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

【讨论】：