使用apexcharts渲染曲线图

2021-10-23 From 程序之心 By 丁仪
<p> apexcharts 是一个非常优秀的图表库,本文记录使用 apexcharts 画曲线图的方法。其他图表的使用方法请参考官方网站 https://apexcharts.com/。apexcharts 支持多种类型的图表,官网 demo 如下所示,基本能够满足日常所需。 p> <p>

使用 apexcharts 库,需要引入相应的 js 文件。

npm 引入方式为 npm install apexcharts --save

js 文件引入方式为 <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>


p> <p> 可以画出多条线条的曲线图,如下所示。 p> <p> p> <p> 以上曲线图渲染配置如下: p>

var options = {
                  chart: {
        height: 364,
        type: "line",
        dropShadow: {
            enabled: !0,
            opacity: .2,
            blur: 7,
            left: -7,
            top: 7
        }
    },
    dataLabels: {
        enabled: !1
    },
    stroke: {
        curve: "smooth",
        width: 4
    },
    series: [
        {
            name: "a",
            data: [216,352,161,185,282,264,268,263,506,190,259,399,416,746,272,741,2049,967,684,623,174,118,241,387,206,331,341,244,858,325]
        },
        {
            name: "b",
            data: [110,94,93,109,101,104,76,122,111,95,119,108,121,127,124,183,383,142,191,248,96,75,107,99,105,151,108,151,131,112]
        },
        {
            name: "c",
            data: [93,140,64,69,95,80,109,118,156,89,96,110,142,194,109,210,360,340,182,140,57,40,70,163,56,141,140,86,373,140]
        },
        {
            name: "d",
            data: [22,30,12,10,33,7,22,13,22,13,8,68,31,101,28,78,275,218,53,65,3,9,17,26,12,2,10,5,312,40]
        }
    ],
    zoom: {
        enabled: !1
    },
    legend: {
        show: !1
    },
    xaxis: {
        type: "string",
        categories: ["09-24","09-25","09-26","09-27","09-28","09-29","09-30","10-01","10-02","10-03","10-04","10-05","10-06","10-07","10-08","10-09","10-10","10-11","10-12","10-13","10-14","10-15","10-16","10-17","10-18","10-19","10-20","10-21","10-22","10-23"],
        tooltip: {
enabled: !1
        },
        axisBorder: {
show: !1
        }
    },
    yaxis: {
        labels: {
offsetX: -15
        }
    },
    grid: {
        row: {
colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
opacity: 0.5
        },
    }
};
<p> 渲染方法如下 p>
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

本文来源:程序之心,转载请注明出处!

本文地址:https://chengxuzhixin.com/blog/article/300310.html

发表感想

© 2016 - 2022 chengxuzhixin.com All Rights Reserved.

浙ICP备2021034854号-1    浙公网安备 33011002016107号