Kendo折線圖 - baseUnit fit - 顯示錯誤值的工具提示

Question

當baseUnit設置爲「fit」時，我有以下問題使用kendo折線圖。 這裏的問題是圖表渲染和數據之間不匹配。請打開這個例子：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; 
} 

Answer 1

由於Telerik的我能找到一種方法來解決它。請閱讀他們的reply。