Highcharts使用——图表使用(一)
legend
- 作用:图例是一个框,其中包含图表中每个系列项目或点项目的符号和名称。
- 代码:
legend: { enabled:true, layout: 'vertical', align: 'right', verticalAlign: 'middle' }
plotOptions
- 作用:绘图选项对图形的属性进行包装,处理
- 代码:
plotOptions: { series: { dataLabels: { enabled: true, formatter: function () { //每个点值 let yDatas = this.series.yData; //最大值 let maxV = Math.max(...yDatas); //最小值 let minV = Math.min(...yDatas); //最后一个值 let dataLength = yDatas.length; let lastV = yDatas[dataLength - 1]; if (this.y == minV || this.y == lastV) { return this.y; } else { return ''; } } } } },
tooltip
- 作用:鼠标放置时显示效果配置
- 建议:格式化时有formatter属性可用,但是还是建议使用headerFormatter-pointFormatter-footerFormatter进行格式化,因为比较全面
- 代码:
tooltip: { shared: true, useHTML: true, headerFormat: '<table><tr><th colspan="2">{point.key}</th></tr>', pointFormatter: function () { let hpValue = this.y; let name = this.series.name; let color = this.series.color; debugger; if (hpValue < 1000) { let value = '<tr><td style="color: ' + color + '">' + name + ' </td>' + '<td style="text-align: right"><b>' + hpValue.toFixed(2) + ' GH/s' + '</b></td></tr>'; return value; } else if (hpValue <= 1000000) { let value = '<tr><td style="color: ' + color + '">' + name + ' </td>' + '<td style="text-align: right"><b>' + (hpValue / 1000).toFixed(2) + ' TH/s' + '</b></td></tr>'; return value; } else if (hpValue >= 1000000) { let value = '<tr><td style="color: ' + color + '">' + name + ' </td>' + '<td style="text-align: right"><b>' + (hpValue / 1000000).toFixed(2) + ' PH/s' + '</b></td></tr>'; return value; } }, footerFormat: '</table>' }
图片实例
分类:
前端开发
标签:
Highcharts图表使用
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库