HighCharts使用细节

HighCharts

前言

---

• 最近无意间发现Highcharts这个图表库样式很不错，但是在使用中也有一些小问题，也是分享一下自己的使用经历

(https://img2024.cnblogs.com/blog/3032512/202507/3032512-20250712134201519-562903050.png)
)

• 浏览上图

  具体说明

  • 右侧英文汉化 以及右下角logo替换(清空直接赋空值即可) 直接上代码

      Highcharts.setOptions({
         colors: [
             'rgba(5,141,199,0.5)', 'rgba(80,180,50,0.5)', 'rgba(237,86,27,0.5)'
         ],
         lang: {//帮助栏汉化
             viewFullscreen: "全屏",
             exitFullscreen: "退出全屏",
             printChart: "打印图表",
             downloadJPEG: "下载JPEG 图片",
             downloadPDF: "下载PDF文档",
             downloadPNG: "下载PNG 图片",
             downloadSVG: "下载SVG 矢量图",
             exportButtonTitle: "导出图片"
         },
         credits: {
             text: "TK"//右下Logo
         }
    
     });
    

  • 下方系列标签显隐控制 在 Highcharts.chart渲染图表内部，添加该属性，设置为true就是显现系列标签

       legend: {
           enabled: true,
       },
    

  • 以下是为了单独为 箱形图 悬浮展示汉化标签 直接上代码 在 Highcharts.chart渲染图表内部series里的tooltip重新设置修改pointFormat，其它图表并未查看，适用于箱形图悬浮展示

     series: [
         {
             name: "观察",
             data: [
                 [760, 801, 848, 895, 965],
                 [733, 853, 939, 980, 1080],
                 [714, 762, 817, 870, 918],
                 [724, 802, 806, 871, 950],
                 [834, 836, 864, 882, 910],
             ],
             tooltip: {
                 headerFormat: "<em>理论值{point.key}</em><br/>",
                 pointFormat: '<span style="color:{point.color}">●</span> <b>{series.name}</b><br/>最大值: {point.high}<br/>上四分位: {point.q3}<br/>中位数: {point.median}<br/>下四分位: {point.q1}<br/>最小值: {point.low}<br/>'
             },
             color: Highcharts.defaultOptions.colors[1]
         },