我正在使用KendoUI来替换一些DotNet Charting Graphs。即使没有数据,如何保持线路连接?
第一张图表是正在替换的Dot Net Charting。第二张图是KendoUI,我想保持连接点。
我的HTML看起来像这样:
以下图表的jQuery Kendo脚本如下所示:
jQuery('#chart').kendoChart({
title: {
text: "Overall Score out of 100",
align: "left",
font: "18px Arial, Verdana, sans-serif"
},
seriesDefaults: {
type: "line"
},
legend: {
position: "bottom"
},
tooltip: {
visible: true,
format: "{0}%"
},
valueAxis: {
min: 70,
max: 85,
plotBands: [{
from: 70,
to: 75,
color: "#EDF5FF"},
{
from: 80,
to: 85,
color: "#EDF5FF"}]
},
series: [{
name: "Some Product",
color: "004990",
tooltip: {
visible: true,
template: "<b>Some Product *</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
{
name: " Some Market Segmemt",
color: "da7633",
tooltip: {
visible: true,
template: "<b> Some Market Segment</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
categoryAxis: {
labels: {
rotation: -45
},
categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
}
});
这是JSFittle项目的链接,其中包含要使用的图表:http://jsfiddle.net/rodneyhickman/uMTnh/1/
答案 0 :(得分:5)
在这里:http://jsfiddle.net/LyndsySimon/KJuDe/
您需要在系列配置中使用missingValues: 'interpolate'
选项。
我在Kendo文档的这一页上找到了这个答案:http://www.kendoui.com/documentation/dataviz/chart/configuration.aspx
编辑:我没有看到你的配置,不知怎的。这是补丁,填补所有系列的空白 -jQuery('#chart').kendoChart({
title: {
text: "Overall Score out of 100",
align: "left",
font: "18px Arial, Verdana, sans-serif"
},
seriesDefaults: {
type: "line",
missingValues: "interpolate"
},
legend: {
position: "bottom"
},
tooltip: {
visible: true,
format: "{0}%"
},
valueAxis: {
min: 70,
max: 85,
plotBands: [{
from: 70,
to: 75,
color: "#EDF5FF"},
{
from: 80,
to: 85,
color: "#EDF5FF"}]
},
series: [{
name: "Some Product",
color: "004990",
tooltip: {
visible: true,
template: "<b>Some Product *</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
{
name: " Some Market Segmemt",
color: "da7633",
tooltip: {
visible: true,
template: "<b> Some Market Segment</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
categoryAxis: {
labels: {
rotation: -45
},
categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
}
});