展开
拓展 关闭
邮箱 邮箱
图床 图床
笔记 笔记
ProcessOn ProcessOn
原型图 原型图
CodePen CodePen
服务器 服务器
coding coding
fastmock fastmock
Docker Hub Docker Hub
Travis Cl Travis Cl
码工具 码工具
在线工具 在线工具
蛙蛙工具 蛙蛙工具
PDF24 Tools PDF24 Tools
校招 校招
BOSS直聘 BOSS直聘
猎聘 猎聘
职友集 职友集
天眼查 天眼查
百度 百度
知乎 知乎
简书 简书
抖音 抖音
今日头条 今日头条
统计分析 统计分析
思维导图 思维导图
日历热力图 日历热力图
关系图 关系图
矩形树图 旭日图
订阅号推广码
GitHub
视频
公告栏 关闭

vis.js动态样式折线图

  • 代码案例
<!doctype html>
<html>
<head>
  <title>Timeline</title>
  <script type="text/javascript" src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"></script>
  <link href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    body,
    html {
        font-family: sans-serif;
    }
 
    #visualization {
        width: 600px;
    }
  </style>
</head>
<body>    
    <table>
    <colgroup>
        <col width="600" />
        <col width="220" />
    </colgroup>
    <tbody>
        <tr>
        <td style="padding-right: 20px; border-right: 1px solid">
            <div id="visualization"></div>
        </td>
        <td style="padding-left: 5px">
            <table style="font-size: 12px">
            <colgroup>
                <col width="150" />
                <col width="50" />
            </colgroup>
            <tbody>
                <tr>
                <td>Line Color</td>
                <td>
                    <select id="color" onchange="updateStyle()">
                    <option value="stroke:green;">green</option>
                    <option value="stroke:red;">red</option>
                    <option value="stroke:blue;" selected="selected">blue</option>
                    <option value="stroke:black;">black</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Line Style</td>
                <td>
                    <select id="line" onchange="updateStyle()">
                    <option value="stroke-dasharray:1 0;" selected="selected">
                        line
                    </option>
                    <option value="stroke-dasharray:10 10;">dash</option>
                    <option value="stroke-dasharray:2 2;">dot</option>
                    <option value="stroke-dasharray:10 5 2 5;">dash-dot</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Line thickness</td>
                <td>
                    <select id="thickness" onchange="updateStyle()">
                    <option value="stroke-width:0;">0</option>
                    <option value="stroke-width:1;">1</option>
                    <option value="stroke-width:2;" selected="selected">2</option>
                    <option value="stroke-width:3;">3</option>
                    <option value="stroke-width:4;">4</option>
                    <option value="stroke-width:5;">5</option>
                    <option value="stroke-width:6;">6</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Fill Position</td>
                <td>
                    <select id="fill" onchange="updateStyle()">
                    <option value="">none</option>
                    <option value="top">top</option>
                    <option value="bottom">bottom</option>
                    <option value="zero" selected="selected">zero</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Fill Color</td>
                <td>
                    <select id="fillcolor" onchange="updateStyle()">
                    <option value="fill:green;">green</option>
                    <option value="fill:red;">red</option>
                    <option value="fill:blue;" selected="selected">blue</option>
                    <option value="fill:black;">black</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Fill Opacity</td>
                <td>
                    <select id="fillopacity" onchange="updateStyle()">
                    <option value="fill-opacity:0.1;">0.1</option>
                    <option value="fill-opacity:0.2;">0.2</option>
                    <option value="fill-opacity:0.3;">0.3</option>
                    <option value="fill-opacity:0.4;">0.4</option>
                    <option value="fill-opacity:0.5;">0.5</option>
                    <option value="fill-opacity:0.6;" selected="selected">
                        0.6
                    </option>
                    <option value="fill-opacity:0.7;">0.7</option>
                    <option value="fill-opacity:0.8;">0.8</option>
                    <option value="fill-opacity:0.9;">0.9</option>
                    <option value="fill-opacity:1;">1</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Points Shape</td>
                <td>
                    <select id="points" onchange="updateStyle()">
                    <option value="">none</option>
                    <option value="circle">circle</option>
                    <option value="square" selected="selected">square</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Points Size</td>
                <td>
                    <select id="pointsize" onchange="updateStyle()">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6" selected="selected">6</option>
                    <option value="8">8</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Points Color</td>
                <td>
                    <select id="pointcolor" onchange="updateStyle()">
                    <option value="stroke:green;">green</option>
                    <option value="stroke:red;">red</option>
                    <option value="stroke:blue;" selected="selected">blue</option>
                    <option value="stroke:black;">black</option>
                    </select>
                </td>
                </tr>
                <tr>
                <td>Point Line Thickness</td>
                <td>
                    <select id="pointthickness" onchange="updateStyle()">
                    <option value="stroke-width:0;">0</option>
                    <option value="stroke-width:1;">1</option>
                    <option value="stroke-width:2;" selected="selected">2</option>
                    <option value="stroke-width:3;">3</option>
                    <option value="stroke-width:4;">4</option>
                    <option value="stroke-width:5;">5</option>
                    <option value="stroke-width:6;">6</option>
                    </select>
                </td>
                </tr>
                <tr></tr>
                <tr>
                <td>Points Fill Color</td>
                <td>
                    <select id="pointfill" onchange="updateStyle()">
                    <option value="fill:green;">green</option>
                    <option value="fill:red;">red</option>
                    <option value="fill:blue;" selected="selected">blue</option>
                    <option value="fill:black;">black</option>
                    </select>
                </td>
                </tr>
            </tbody>
            </table>
        </td>
        </tr>
    </tbody>
    </table>
 
    
<script type="text/javascript">
    var container = document.getElementById("visualization");
    var items = [
    { x: "2014-06-11", y: 10, group: 0 },
    { x: "2014-06-12", y: 25, group: 0 },
    { x: "2014-06-13", y: 30, group: 0 },
    { x: "2014-06-14", y: -10, group: 0 },
    { x: "2014-06-15", y: 15, group: 0 },
    { x: "2014-06-16", y: 30, group: 0 },
    ];
 
    var dataset = new vis.DataSet(items);
    var options = {
    start: "2014-06-10",
    end: "2014-06-18",
    dataAxis: {
        showMinorLabels: false,
        icons: true,
    },
    };
 
    var groupData = {
    id: 0,
    content: "Group Name",
    options: {
        drawPoints: {
        style: "square", // square, circle
        },
        shaded: {
        orientation: "zero", // top, bottom
        },
    },
    };
 
    var groups = new vis.DataSet();
    groups.add(groupData);
 
    var graph2d = new vis.Graph2d(container, dataset, groups, options);
    updateStyle();
 
    function updateStyle() {
    groupData.style = "";
    groupData.style += document.getElementById("color").value;
    groupData.style += document.getElementById("line").value;
    groupData.style += document.getElementById("thickness").value;
 
    groupData.options.drawPoints = {};
    groupData.options.drawPoints.styles = "";
    groupData.options.drawPoints.style = document.getElementById("points").value;
    groupData.options.drawPoints.styles +=
        document.getElementById("pointcolor").value;
    groupData.options.drawPoints.styles +=
        document.getElementById("pointthickness").value;
    groupData.options.drawPoints.styles +=
        document.getElementById("pointfill").value;
    groupData.options.drawPoints.size = Number(
        document.getElementById("pointsize").value
    );
    if (groupData.options.drawPoints.style == "") {
        groupData.options.drawPoints = false;
    }
 
    groupData.options.shaded = {};
    groupData.options.shaded.style = "";
    groupData.options.shaded.style += document.getElementById("fillcolor").value;
    groupData.options.shaded.style +=
        document.getElementById("fillopacity").value;
    groupData.options.shaded.orientation = document.getElementById("fill").value;
    if (groupData.options.shaded.orientation == "") {
        groupData.options.shaded = false;
    }
 
    var groups = new vis.DataSet();
    groups.add(groupData);
    graph2d.setGroups(groups);
    }
 
</script>
</body>
</html>
  • 效果图
点击查看详情

posted @   DogLeftover  阅读(24)  评论(0)  编辑  收藏  举报
相关博文：
·  vis.js分组多图折线图
·  vis.js分组折线图
·  HTML中使用Echarts
·  echarts折线组件
·  React-和-D3-js-集成教程-全-
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
历史上的今天：
2022-04-22 Spring MVC入门（七）：HttpMessageConverter
2022-04-22 Spring MVC入门（六）：RESTful
点击右上角即可分享
微信分享提示
AI IDE Trae