【问题标题】:kendo UI bar chart- how to move the X axiskendo UI条形图-如何移动X轴
【发布时间】:2014-05-20 08:32:05
【问题描述】:

这里是剑道UI条形图的链接:http://jsfiddle.net/nayanakalkur/ZPUr4/119/

在小提琴示例中,X 轴位于“0”。如何在 Y 轴上上下移动轴? 假设我想让 X 轴的 'y' 值为 10?如何做到这一点?

相同的代码:

HTML 代码:

    <div id="example" class="k-content">
    <div id="chart"></div>
</div>

Javascript 代码:

function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors"
            },
            legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                labels: {
                    visible: true,
                    background: "transparent",

                }
            },
            series: [{
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0
            }, {
                name: "Unique visitors",
                data: series2,
                gap: 1.0
            }],
            valueAxis: {
                line: {
                    visible: false
                },
                title: {
                    text: "Availability"
                }
            },
            categoryAxis: {
                majorGridLines: {
                    visible: true,
                    position: "bottom"
                }
            },
            tooltip: {
                visible: true,
                format: "{0}"
            }
        });
    }

var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];

    $(document).ready(function () {
        createChart();

        $("#example").bind("kendo:skinChange", createChart);

        var chart = $("#chart").data("kendoChart"),
            firstSeries = chart.options.series;
    });

提前致谢。

【问题讨论】:

    标签: kendo-ui kendo-dataviz kendo-chart


    【解决方案1】:

    valueAxis.min 设置为 10:

            valueAxis: {
                min: 10,
                line: {
                    visible: false
                },
                title: {
                    text: "Availability"
                }
            },
    

    您的 JSFiddle 在此处修改:http://jsfiddle.net/OnaBai/ZPUr4/120/

    编辑:如果您希望轴与某个特定值相交,则将valueAxis.axisCrossingValue 设置为该值。

    例子:

        valueAxis: {
            axisCrossingValue: -50000, 
            line: { visible: false },
            title: { text: "Availability" },
        },
    

    而JSFiddle修改了http://jsfiddle.net/OnaBai/ZPUr4/126/

    【讨论】:

    • 感谢您的回答。这有帮助。但我也希望绘制负 Y 轴上的条形图。我怎样才能做到这一点? Jsfiddle 链接 - (jsfiddle.net/nayanakalkur/ZPUr4/121) 有一个负值。
    • 谢谢!有效。 X轴颜色可以改成其他颜色吗?
    猜你喜欢
    • 2023-03-11
    • 2014-07-08
    • 2018-12-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-01
    • 2013-10-23
    • 1970-01-01
    相关资源
    最近更新 更多