剑道折线图 - 基本单位拟合 - 显示错误值的工具提示
Kendo Line chart - baseUnit fit - tooltip displaying the wrong value
当基本单位设置为"适合"时,使用剑道折线图时,我遇到了以下问题。这里的问题是图表呈现和数据不匹配。请打开此示例:http://jsbin.com/geyeqi/edit?output
选择 2013 年 6 月下的第二个点,我期望以下值:4650。但是,工具提示显示错误的值 (4850)。
有谁知道如何解决它?我已经在 telerik 中打开了一张票:http://www.telerik.com/forums/kendo-line-chart---baseunit-fit---tooltip-displaying-the-wrong-value
这是代码:
window.minimumDate = new Date(Date.parse('03/01/2013'));
window.maximumDate = new Date(Date.parse('03/01/2015'));
$(document).ready(function () {
var createLineChart = function (minDate, maxDate) {
$("#plan-line-chart").kendoChart({
dataSource: {
data: getPrices(minDate, maxDate)
},
dataBound: function () {
if (this.dataSource.view().length <= 12) {
this.options.categoryAxis.baseUnit = "months";
}
},
legend: {
position: "top"
},
seriesDefaults: {
type: "line",
style: "smooth"
},
seriesColors: ["rgba(178, 44, 27, 1)"],
series:
[
{
field: "CurrentPrice",
name: "Contributions",
categoryField: "Date"
}
],
valueAxis: {
majorGridLines: {
visible: true
},
line: {
visible: false
},
labels: {
template: "#= formatAmount(value) #"
},
},
categoryAxis: {
field: "Date",
type: "Date",
baseUnit: "fit",
labels: {
rotation: 45
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= formatAmount(value) #"
}
});
};
var rangeSliderOnChange = function (element) {
var minDate = new Date(element.value[0]);
var maxDate = new Date(element.value[1]);
var linechart = $("#plan-line-chart").data("kendoChart");
if (linechart != undefined) {
linechart.destroy();
createLineChart(minDate, maxDate);
}
};
var templateString = "#= formatToMonthYear(selectionStart) # - #= formatToMonthYear(selectionEnd) #";
$("#plan-range-slider").kendoRangeSlider({
change: rangeSliderOnChange,
min: window.minimumDate.getTime(),
max: window.maximumDate.getTime(),
smallStep: 86400000,
largeStep: 86400000,
tickPlacement: "none",
tooltip: {
template: kendo.template(templateString)
}
});
createLineChart(window.minimumDate, window.maximumDate);
});
function formatAmount(amount) {
return kendo.toString(amount, "#,##0.00");
}
function formatToMonthYear(val) {
return kendo.toString(new Date(val), 'MMM yyyy');
}
function getPrices(min, max) {
var prices = [
{
"Date": new Date(Date.parse('03/01/2015')),
"CurrentPrice": 8250.00
},
{
"Date": new Date(Date.parse('02/01/2015')),
"CurrentPrice": 8000.00
},
{
"Date": new Date(Date.parse('01/01/2015')),
"CurrentPrice": 7750.00
},
{
"Date": new Date(Date.parse('12/01/2014')),
"CurrentPrice": 7500.00
},
{
"Date": new Date(Date.parse('11/01/2014')),
"CurrentPrice": 7250.00
},
{
"Date": new Date(Date.parse('10/01/2014')),
"CurrentPrice": 7000.00
},
{
"Date": new Date(Date.parse('09/01/2014')),
"CurrentPrice": 6750.00
},
{
"Date": new Date(Date.parse('08/01/2014')),
"CurrentPrice": 6550.00
},
{
"Date": new Date(Date.parse('07/01/2014')),
"CurrentPrice": 6350.00
},
{
"Date": new Date(Date.parse('06/01/2014')),
"CurrentPrice": 6150.00
},
{
"Date": new Date(Date.parse('05/01/2014')),
"CurrentPrice": 5950.00
},
{
"Date": new Date(Date.parse('04/01/2014')),
"CurrentPrice": 5750.00
},
{
"Date": new Date(Date.parse('03/01/2014')),
"CurrentPrice": 5550.00
},
{
"Date": new Date(Date.parse('02/01/2014')),
"CurrentPrice": 5450.00
},
{
"Date": new Date(Date.parse('01/01/2014')),
"CurrentPrice": 5350.00
},
{
"Date": new Date(Date.parse('12/01/2013')),
"CurrentPrice": 5250.00
},
{
"Date": new Date(Date.parse('11/01/2013')),
"CurrentPrice": 5150.00
},
{
"Date": new Date(Date.parse('10/01/2013')),
"CurrentPrice": 4950.00
},
{
"Date": new Date(Date.parse('09/01/2013')),
"CurrentPrice": 4950.00
},
{
"Date": new Date(Date.parse('08/01/2013')),
"CurrentPrice": 4850.00
},
{
"Date": new Date(Date.parse('07/01/2013')),
"CurrentPrice": 4750.00
},
{
"Date": new Date(Date.parse('06/01/2013')),
"CurrentPrice": 4650.00
},
{
"Date": new Date(Date.parse('05/01/2013')),
"CurrentPrice": 4550.00
},
{
"Date": new Date(Date.parse('04/01/2013')),
"CurrentPrice": 4450.00
},
{
"Date": new Date(Date.parse('03/01/2013')),
"CurrentPrice": 4350.00
}
];
var currentPrices = [];
$("#currentPrices").text('');
var minDate = new Date((min.getMonth() + 1) + '/01/' + min.getFullYear());
var maxDate = new Date((max.getMonth() + 1) + '/01/' + max.getFullYear());
for (var i = prices.length - 1; i >= 0; i--) {
if (prices[i].Date >= minDate && prices[i].Date <= maxDate) {
currentPrices.push(prices[i]);
$("#currentPrices").append("<li>" + kendo.toString(prices[i].Date, 'MMM yyyy') + " :: " + prices[i].CurrentPrice + "</li>");
}
}
return currentPrices;
}
多亏了
Telerik,我才能找到修复它的方法。请阅读他们的回复。
相关文章:
- angularstrap bs工具提示导致错误:无法读取属性'至小写'的未定义
- 工具提示格式化程序中的间距错误
- 动态谷歌图表的工具提示错误
- 用于显示字段的工具提示和显示 Jquery 验证中的错误的工具提示器
- j查询工具提示引发错误:未定义函数
- 高图表:显示错误值的堆积区域工具提示
- “初始化前无法在工具提示上调用方法”错误,当我添加 jquery-ui 库时
- DOJO 工具提示给出“未捕获的类型错误:对象不是函数”
- IE 10 上带有 jquery 工具提示的 java 脚本错误
- 带有 D3v 3.5.13 图例和工具提示的简单 D3 折线图中的错误
- 在使用ng repeat和limit to时,jQuery中的上下文出现错误,并从tether.js获得工具提示
- 如何修复错误;“错误:引导工具提示需要系绳 (http://github.hubspot.com/tether/)”
- JQuery UI工具提示-工具提示的位置错误(在页面左侧,而不是按钮周围)
- Highcharts-更新系列会导致与工具提示相关的错误(mouseOver)
- 未捕获的语法错误:意外的令牌 .D3 工具提示
- 为什么这个工具提示没有'不在IE工作吗?错误:应为对象
- 堆叠柱形图的Highcharts工具提示错误
- 使用HTML5
- 如何在确认密码的工具提示中显示错误信息
- 在工具提示中显示错误信息