KendoUI 线图,如何防止标签被绘制在图外? [英] KendoUI line Graph, How to keep labels from being drawn outside the graph?
问题描述
我正在使用 KendoUI 折线图.我在折线图上有标签,标签在顶部被切断.有没有办法防止这种情况发生?
这是一个 jsFiddle 项目:http://jsfiddle.net/rodneyhickman/2eWYg/1/
这是我的标记:
这是我的脚本:
jQuery('#divChart').kendoChart({系列默认值:{类型:线",缺失值:插值"},传奇: {位置:底部"},工具提示:{可见:真实,格式:{0}%"},值轴:{分钟:70,最大:90,情节带:[{来自: 70,到: 75,颜色:#f5f5f5"},{来自: 80,到: 85,颜色:#f5f5f5"},{来自: 90,至: 95,颜色:#f5f5f5"}]},系列: [{类型:线",名称:产品1",颜色:#004990",宽度:1,标记:{背景:#004990"},工具提示:{可见:真实,模板:<b>产品 1</b><br/>当前分数:#= 值#<br/>#= 类别#"},标签: {可见:真实},数据:[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]},{类型:线",name: "市场细分",颜色:#da7633",宽度:1,标记:{背景:#da7633"},工具提示:{可见:真实,模板:<b>细分市场</b><br/>当前分数:#=价值#<br/>#=类别#"},数据:[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]}],类别轴:{标签: {旋转:-45,步骤1,跳过:0},类别:[Apr"、May"、Jun"、Jul"、Aug"、Sep"、Oct"、Nov"、Dec"、Jan - 2012"、Feb"、三月", "四月"]}});
解决方案 通过向 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屋!
查看全文