timeline 时间轴插件

简介

timeline 基于 raphael.js 开发，支持时间轴上主节点和分支节点的展示方式。

示例

$(function () {
    var opt = {
        //图例数据
        legend: [
            {
                text: "图例1-测试-images/compact_disc.png",
                name: "1",
                icon: "images/compact_disc.png"
            }, {
                text: "图例2",
                name: "2",
                icon: "images/compose.png"
            }, {
                text: "图例3",
                name: "3",
                icon: "images/computer-keyboard.png"
            }, {
                text: "图例4-测试-abcdefg",
                name: "4",
                icon: "images/contacts.png"
            }, {
                text: "图例5",
                name: "5",
                icon: "images/contacts-alt.png"
            }, {
                text: "legend6",
                name: "6",
                icon: "images/counter.png"
            }],
        //节点数据
        data: [
            {
                text: "主节点1",
                //子节点
                children: [
                    {
                        text: "1-1:图例1-测试-images/compact_disc.png",
                        legendName: "1",
                        imageUrl: ""
                    }, {
                        text: "1-2",
                        legendName: "2",
                        imageUrl: ""
                    }, {
                        text: "1-3",
                        legendName: "3",
                        imageUrl: ""
                    }, {
                        text: "1-4:test",
                        legendName: "4",
                        imageUrl: ""
                    }, {
                        text: "1-5",
                        legendName: "5",
                        imageUrl: ""
                    }, {
                        text: "1-6",
                        legendName: "6",
                        imageUrl: ""
                    }]
            },
            {
                text: "主节点2"
            },
            {
                text: "主节点3",
                children: [
                    {
                        text: "1-1:图例1-测试-images/compact_disc.png",
                        legendName: "1",
                        imageUrl: ""
                    }, {
                        text: "1-2",
                        legendName: "2",
                        imageUrl: ""
                    }, {
                        text: "1-3",
                        legendName: "3",
                        imageUrl: ""
                    }, {
                        text: "1-4:test",
                        legendName: "4",
                        imageUrl: ""
                    }, {
                        text: "1-5",
                        legendName: "5",
                        imageUrl: ""
                    }, {
                        text: "1-6",
                        legendName: "6",
                        imageUrl: ""
                    }]
            },
            {
                text: "主节点4"
            },
            {
                text: "主节点5"
            },
            {
                text: "主节点6"
            }

        ]
    }
    $("#demo").timeline(opt);

});

支持自定义皮肤样式

        opt.theme = {
            lengend: {
                fill: "#000000",
            },
            startNode: {
                radius: 10,
                fill: "#7E899D"
            },
            endNode: {
                radius: 10,
                fill: "#7E899D"
            },
            centralAxisNode: {
                height: 21,
                radius: 4,
                fill: "#1A84CE",
                color: "#ffffff",
                inner: {
                    fill: "#1A84CE",
                    "stroke-width": 0,
                    stroke: "#1A84CE"
                },
                outer: {
                    fill: "#1A84CE",
                    "stroke-width": 3,
                    stroke: "#1A84CE"
                }
            },
            centralAxisLine: {
                fill: "#7E899D"
            },
            centralAxisBranchNode: {
                fill: "#F9BF3B",
                radius: 10
            },
            centralAxisBranchLine: {
                stroke: '#F9BF3B',
                fill: "#F9BF3B"
            },
            centralAxisBranchContent: {
                fill: "#F9BF3B",
                color: "#ffffff",
                stroke: '#ffffff',
                height: 24
            }
        }

启动Web服务

npm install http-server -g

terminal:

http-server