use*_*903 4 kendo-ui kendo-chart kendo-dataviz
如何更改kendo条形图 - 系列标签定位?考虑以下小提琴:http://jsfiddle.net/ZPUr4/149/
在图表中,对于正值,条形值位于顶部,对于负值,条形值位于底部.
如何将系列标签值定位在条形图的顶部以获得正值和负值?
如果条形值变化,如何将所有标签值放在同一水平线上?
如果我的问题不明确,请告诉我.
以下是HTML代码:
<div id="example" class="k-content">
<div id="chart"></div>
</div>
Run Code Online (Sandbox Code Playgroud)
JS代码:
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: {
min: -200000,
max: 200000,
axisCrossingValue: 50000,
line: {
visible: false
},
title: {
text: "Availability"
},
color: 'blue'
},
categoryAxis: {
color: "blue",
width: 25,
majorGridLines: {
visible: true,
position: "bottom"
},
line: {
width: 3,
}
},
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;
});
Run Code Online (Sandbox Code Playgroud)
谢谢.
为了指定值在顶部,您应该使用:
labels: {
visible: true,
position: "top"
}
Run Code Online (Sandbox Code Playgroud)
但有了这个,你必须放置数里面吧.为了将它移到外面,你需要做:
labels: {
visible: true,
position: "top",
padding: {
top: -20
}
}
Run Code Online (Sandbox Code Playgroud)
添加padding.top20pix的地方就足够了.
你在这里修改了JSFiddle:http://jsfiddle.net/OnaBai/ZPUr4/178/
| 归档时间: |
|
| 查看次数: |
9924 次 |
| 最近记录: |