jQuery流水折线员工业绩图表插件代码highcharts

最新推荐文章于 2024-09-11 15:33:18 发布

amohan

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量123

点赞数

分类专栏：网站模版文章标签： jquery javascript 前端

原文链接：https://yy123.ink/frontDetail/11639

版权

网站模版专栏收录该内容

3170 篇文章 30 订阅

订阅专栏

这段代码展示了如何利用highcharts.js库来制作一个展示2月到7月员工业绩流水的折线图表。图表包括员工A、员工B、员工C和员工D的数据，部分员工在某些月份没有数据。图表还具有响应式设计，适应不同屏幕尺寸。

摘要由CSDN通过智能技术生成

下载地址

JS员工业绩流水折线图表代码是一款基于highcharts.js折线图表插件制作员工业绩流水情况折线图数据图表代码。var chart = Highcharts.chart("container", { title: { text: "2月 ~ 7月业绩流水情况" }, subtitle: { text: "数据来源：尚德鹰眼系统" }, yAxis: { title: { text: "流水" } }, legend: { layout: "vertical", align: "right", verticalAlign: "middle" }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2 } }, series: [ { name: "员工A", data: [43934, 52503, 57177, 69658, 97031, 119931], color:"#ff0000" }, { name: "员工B", data: [24916, 24064, 59742, 29851, 32490, 60282] }, { name: "员工C", data: [11744, 37722, 16005, 19771, 20185, 24377] }, { name: "员工D", data: [null, null, 7988, 12169, 15112, 22452] }, { name: "员工E", data: [12908, 35948, 8105, 11248, 8989, 11816] } ], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: "horizontal", align: "center", verticalAlign: "bottom" } } }] }});