簡體   English   中英

Kendo UI圖表工具提示並重繪

[英]Kendo UI chart tooltip and redraw

我的問題如下:

我想在Kendo UI中有一個scatterLine圖表,在其中既可以顯示工具提示,又可以具有seriesHover效果。

演示: http : //jsfiddle.net/9Lvzu9qh/2/

注釋掉第44行: chart.redraw(); 看我的問題。 如果重繪了圖表,則將清除工具提示。 如果未重繪圖表,則不會得到突出顯示效果。

如何獲得突出顯示和工具提示? 解決這兩個問題的替代方法也被接受。

我使保存以前的ID並僅在更改意向時更改顏色才起作用:

var previousId = 0;
$("#chart").kendoChart({
    title: {
        text: "Line demo (Kendo UI v2014.3.1119)"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "scatterLine",
        width: 2,

    },
    series: [{
            name: "A",
            data: [[0,1], [1,2], [2,3]]
        },
        {
            name: "B",
            data: [[0,2], [1,3], [2,5]]
        },
        {
            name: "C",
            data: [[0,3], [1,5], [2,2]]
        }
    ],
    seriesHover : function(e) {

        var chart = e.sender;
        var idx = _.findIndex(chart.options.series, function (s) {
            return s === e.series;
        });
        if(previousId != idx)
            previousId = idx;
        else
            return;
        if (idx >= 0) {
            var thisSeries = chart.options.series[idx];
            // attach event to hovering over a series
            // On hover, set opacity to full and increase width
            // Decrease opacity and width on all other series
            _.each(chart.options.series, function (s) {
                s.width = 2;
                s.opacity = 0.4;
            });

            thisSeries.width = 4;
            thisSeries.opacity = 1;
             $("#chart").data("kendoChart").redraw();




        }
    },
    tooltip: {
        visible: true,
        format: "X: {0} Y: {1}"
    },
    transitions: false
});

希望能幫助到你。

小提琴: http : //jsfiddle.net/9Lvzu9qh/4/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM