随笔 - 76, 文章 - 0, 评论 - 5, 阅读 - 46468

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

uCharts混合图,区域图不显示折线

Posted on   WinChance  阅读(2165)  评论(2编辑  收藏  举报

    原来不能理所当然,认为单个area与mix里的area用法一样!!可能作者实现还有问题,导致单个area的顶部折线是用extra配置的,而mix图里,顶部折线是用相同数据源的line直接绘制出来的。我晕,搞了我1天,一直以为配置有问题,原来是uCharts的实现不够优雅!!

单个,只需配置 addLine: true

复制代码
extra: {
    area: {
        type: 'straight',
        opacity: 0.2,
        addLine: true,
        width: 4,
        gradien:true
    }
}
复制代码

混合图里,区域图的标准数据源如下:

一开始,按照单个的思路设置type='area',出来的效果如下:

 

复制代码
let mixData = {
    "categories": [
        "2012",
        "2013",
        "2014",
        "2015",
        "2016",
        "2017"
    ],
    "series": [{
            "name": "曲面",
            "data": [
                70,
                50,
                85,
                130,
                64,
                88
            ],
            "type": "area",
            "style": "curve"
        },
        {
            "name": "曲线",
            "data": [
                70,
                50,
                85,
                130,
                64,
                88
            ],
            "type": "line",
            "style": "curve",
            "color": "#1890ff",
            "disableLegend": false
        }
    ]
}
复制代码

最后ok了,妈的!!

 

编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示