KendoUI线图，如何保持标签被绘制图形外？ [英] KendoUI line Graph, How to keep labels from being drawn outside the graph?

问题描述

我使用KendoUI线图。我有一个线图标签，标签越来越顶部切断。有没有一种方法，以prevent呢？

下面是一个的jsfiddle项目一起玩： http://jsfiddle.net/rodneyhickman/2eWYg/1/

下面是我的标记：

 ＆LT; D​​IV的风格=填充：20像素; ＆GT;
   ＆LT; D​​IV ID =divChart＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

下面是我的脚本：

 的jQuery（'＃divChart'）。kendoChart（{
seriesDefaults：{
    类型：行
    missingValues​​：插值
}，
传说：{
    位置：底
}，
提示：{
    可见：真实，
    格式为：{0}％
}，
valueAxis：{
    分：70，
    最大：90，
    plotBands：[{
        从：70，
        于：75，
        颜色：＃f5f5f5}，
    {
        从：80，
        于：85，
        颜色：＃f5f5f5}，
    {
        来自：90，
        于：95，
        颜色：＃f5f5f5}]
}，
系列：[{
    类型：行
    名称：产品1，
    颜色：＃004990，
    宽度：1，
    标记：{
        背景：＃004990
    }，
    提示：{
        可见：真实，
        模板：＆LT; B＆GT;产品1 LT; / B＆GT;＆LT; BR /＆GT;当前分数：＃=值＃＆LT; BR /＆GT;＃=＃类
    }，
    标签： {
        可见：真
    }，
    数据：[88.71，88.87，88.91，89.39，89.44，89.47，89.39，89.38，89.25，88.81，88.9，88.84，88.79]}，
{
    类型：行
    名称：细分市场，
    颜色：＃da7633
    宽度：1，
    标记：{
        背景：＃da7633
    }，
    提示：{
        可见：真实，
        模板：＆LT; B＆GT;市场细分和LT; / B＆GT;＆LT; BR /＆GT;当前分数：＃=值＃＆LT; BR /＆GT;＃=＃类
    }，
    数据：[75.9，75.58，75.54，75.19，74.9，74.42，74.51，74.72，74.55，74.44，74.15，73.86，73.79]}]，
的CategoryAxis：{
    标签： {
        旋转：-45，
        步骤1，
        跳跃：0
    }，
    类别：[月​​，月，君，月，月，月，月，月，月，月 -  2012，月，三月，四月]
}
}）;
 

解决方案

通过增加保证金它使余地标签plotArea。

plotArea：{
        保证金：{
            顶部：20，
            左：5，
            右：5，
            底部：5
        }
    }

下面是解决方案：

http://jsfiddle.net/rodneyhickman/2eWYg/2/

I'm using KendoUI line graph. I have labels on a line graph and the labels are getting cut off on top. Is there a way to prevent this?

Here is a jsFiddle project to play with: http://jsfiddle.net/rodneyhickman/2eWYg/1/

Here is my Markup:

<div style="padding:20px;" >
   <div id="divChart"></div>
</div>

Here is my script:

jQuery('#divChart').kendoChart({
seriesDefaults: {
    type: "line",
    missingValues: "interpolate"
},
legend: {
    position: "bottom"
},
tooltip: {
    visible: true,
    format: "{0}%"
},
valueAxis: {
    min: 70,
    max: 90,
    plotBands: [{
        from: 70,
        to: 75,
        color: "#f5f5f5"},
    {
        from: 80,
        to: 85,
        color: "#f5f5f5"},
    {
        from: 90,
        to: 95,
        color: "#f5f5f5"}]
},
series: [{
    type: "line",
    name: "Product 1",
    color: "#004990",
    width: 1,
    markers: {
        background: "#004990"
    },
    tooltip: {
        visible: true,
        template: "<b>Product 1</b><br/>Current Score: #= value #<br/>#= category # "
    },
    labels: {
        visible: true
    },
    data: [88.71, 88.87, 88.91, 89.39, 89.44, 89.47, 89.39, 89.38, 89.25, 88.81, 88.9, 88.84, 88.79]},
{
    type: "line",
    name: "Market Segment",
    color: "#da7633",
    width: 1,
    markers: {
        background: "#da7633"
    },
    tooltip: {
        visible: true,
        template: "<b>Market Segment</b><br/>Current Score: #= value #<br/>#= category # "
    },
    data: [75.9, 75.58, 75.54, 75.19, 74.9, 74.42, 74.51, 74.72, 74.55, 74.44, 74.15, 73.86, 73.79]}],
categoryAxis: {
    labels: {
        rotation: -45,
        step: 1,
        skip: 0
    },
    categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar", "Apr"]
}
});​

解决方案

By adding a margin to the plotArea it makes room for the labels.

plotArea: { margin: { top: 20, left: 5, right: 5, bottom: 5 } },

Here is the solution:

http://jsfiddle.net/rodneyhickman/2eWYg/2/

这篇关于KendoUI线图，如何保持标签被绘制图形外？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！