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>'
}
复制代码

图片实例

 

posted @   话·醉月  阅读(205)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示