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

Question

我们有一个包含股票图表的页面，除了股票图表之外，在同一页面中我们还有 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 }
            }
        }
    });

});

Answer 1

关闭图例并创建您自己的图例。您将更加灵活地完全按照自己的意愿行事。