如何添加图例到剑道股票图表使用多个系列

How to add legend to kendo stock chart using multiple series?

本文关键字:个系列 何添加 添加      更新时间:2023-09-26

我们有一个页面,其中有股票图表,除了股票图表,在同一个页面中,我们也有网格,也在Kendo StockChart图例中没有动态显示。所以我试过在代码中使用多个系列:但是,当运行此代码图例值重复时,如何解决此问题

$(document).ready(function () {
    var db = new kendo.data.DataSource({
        data : data,
        group: {
            field: "studentmarks"
        }
    });
    db.read();
    $("#Chart").kendoStockChart({
        theme     : $(document).data("kendoSkin") || "silver",
        dataSource: db,
        aggregate : [
            { field: "ID", aggregate: "aggregate", line: "line"}
        ],

        title         : {
            text: "CDR"
        },
        dateField     : "time",
        repeat        : false,
        legend        : {
            position: "right"
        },
        chartArea     : {
            background: ""
        },
        seriesDefaults: {
            type: "line", field: "ID"
        },
        series   : [
            {
                name           : "iad",
                data           : data,
                filter         : "studentmarks",
                color          : "#FC0505",
                width          : 2,
                line           : "line",
                aggregate      : "aggregate",
                visibleInLegend: "studentmarks",
                markers: {
                    visible: false
                },
                tooltip: {
                    visible: true,
                    format : "{0}%"
                }
            },
            {
                name   : "pht",
                filter : "studentmarks",
                data   : data,
                axis   : "",
                color  : "#2605FC",
                width  : 2,
                line   : "line",
                markers: {
                    visible: true
                },
                tooltip: {
                    visible: true,
                    format : "{0}"
                }
            },
            {
                name   : "phone",
                filter : "studentmarks",
                data   : data,
                axis   : "",
                color  : "#ED9AA5",
                width  : 2,
                line   : "line",
                markers: {
                    visible: true
                },
                tooltip: {
                    visible: true,
                    format : "{0}%"
                }
            },
            {
                name   : "cbs",
                filter : "studentmarks",
                data   : data,
                axis   : "",
                color  : "#9AA5ED",
                visible: true,
                opacity: .4,
                width  : 2,
                line   : "line",
                markers: {
                    visible: true
                },
                tooltip: {
                    visible: true,
                    format : "{0}%"
                }
            }
        ],
        valueAxis: [
            {
                title    : { text: "" },
                name     : "mos",
                majorUnit: 0.5,
                max      : 5.0,
                min      : 0
            },
            {
                name     : "ink",
                title    : { text: "" },
                min      : 0,
                max      : 6727.14,
                majorUnit: 1000,
                minorUnit: 500
            }
        ],

        navigator: {
            series: {
                type     : "area",
                color    : "red",
                field    : "time",
                stack    : "true",
                value    : "studentmarks",
                data     : data,
                aggregate: "min",
                name     : "sai",
                select   : {
                    from: "2009-01-01 17:08:04",
                    to  : "2013-12-24 20:30:26"
                },
                labels   : { color: "green", visible: false },
                tooltip  : { background: "green", format: "{0}", color: "white", visible: true }
            }
        }
    });
});

关闭图例并创建自己的图例。你将有更大的灵活性去做你想做的事情。