剑道折线图 - 基本单位拟合 - 显示错误值的工具提示

Kendo Line chart - baseUnit fit - tooltip displaying the wrong value

本文关键字:错误 工具提示 显示 本单位 折线图 拟合      更新时间:2023-09-26

当基本单位设置为"适合"时,使用剑道折线图时,我遇到了以下问题。这里的问题是图表呈现和数据不匹配。请打开此示例: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,我才能找到修复它的方法。请阅读他们的回复。

相关文章: