我遇到了剑道图表的问题。
从下面的代码段中，如果您打开Kendo Dojo并粘贴它，您会发现类别轴只显示一个月“11月”，当时它包含的数据超过4个月。
这些数据按数据源中的符号分组，有2组，组“2.AAL只有一条记录”但如果我要将另一条记录添加到数据源中，并带有符号“2. AAL”，它会准确显示我需要什么，但我似乎因为该组只有一个记录，它忽略了其他月份和组的其他记录。
根据当前数据，我希望图表可以在4个月内连接符号“2. AAPL”的点，而符号“2. AAL”的点是独立的。但是图表显示了所提供数据中的所有点。
请非常感谢任何帮助。
感谢。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/line-charts/grouped-data">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>
<script>
var datatest = [
{
"date": "12/30/2011",
"close": 405,
"volume": 6414369,
"open": 403.51,
"high": 406.28,
"low": 403.49,
"symbol": "2. AAPL"
},
{
"date": "11/30/2011",
"close": 382.2,
"volume": 14464710,
"open": 381.29,
"high": 382.276,
"low": 378.3,
"symbol": "2. AAL"
},
{
"date": "10/31/2011",
"close": 404.78,
"volume": 13762250,
"open": 402.42,
"high": 409.33,
"low": 401.05,
"symbol": "2. AAPL"
},
{
"date": "9/30/2011",
"close": 381.32,
"volume": 19553550,
"open": 387.12,
"high": 388.89,
"low": 381.18,
"symbol": "2. AAPL"
}
];
var stocksDataSource = new kendo.data.DataSource({
data: datatest,
group: {
field: "symbol"
},
sort: {
field: "date",
dir: "asc"
},
schema: {
model: {
fields: {
date: {
type: "date"
}
}
}
}
});
function createChart() {
$("#chart").kendoChart({
title: { text: "Stock Prices" },
dataSource: stocksDataSource,
series: [{
type: "line",
field: "close",
name: "#= group.value # (close)"
}],
legend: {
position: "bottom"
},
valueAxis: {
labels: {
format: "${0}",
skip: 2,
step: 2
}
},
categoryAxis: {
field: "date",
labels: {
format: "MMM"
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>
答案 0 :(得分：1)
经过一段时间的调查，我偶然发现了散点图表，它并不是我想要的。
我的初步工作是使用折线图完成的，但我尝试了散点图表并且有效。
见下面的代码。
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scatter-charts/grouped-data">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>
<script>
var datatest = [
{
"date": "12/30/2011",
"close": 450,
"volume": 6414369,
"open": 403.51,
"high": 406.28,
"low": 403.49,
"symbol": "2. AAPL"
},
{
"date": "11/30/2011",
"close": 382.2,
"volume": 14464710,
"open": 381.29,
"high": 382.276,
"low": 378.3,
"symbol": "2. AAL"
},
{
"date": "10/31/2011",
"close": 404.78,
"volume": 13762250,
"open": 402.42,
"high": 409.33,
"low": 401.05,
"symbol": "2. AAPL"
},
{
"date": "9/30/2011",
"close": 350.32,
"volume": 19553550,
"open": 387.12,
"high": 388.89,
"low": 381.18,
"symbol": "2. AAPL"
}
];
var stocksDataSource = new kendo.data.DataSource({
data: datatest,
group: {
field: "symbol"
},
sort: {
field: "date",
dir: "asc"
},
schema: {
model: {
fields: {
date: {
type: "date"
}
}
}
}
});
function createChart() {
$("#chart").kendoChart({
title: { text: "Stock Prices" },
dataSource: stocksDataSource,
series: [{
type: "scatterLine",
xField: "date",
yField: "close",
name: "#= group.value # (close)"
}],
legend: {
visible: true,
position: "bottom"
},
yAxis: {
labels: {
format: "${0}",
skip: 2,
step: 2
}
},
xAxis: {
labels: {
format: "MMM"
}
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>
</body>
</html>