首页 文章

在工具提示高图Angular 2上显示百分比

提问于
浏览 次
2

嗨我对具有百分比值的普通柱形图具有以下高图配置 .

private _attendanceInputData: any = {

        chart: { type: 'column' },
        title : { text : 'Daily Attendance Overview' },  

        xAxis: {
            categories: this._weekValues
        },
        yAxis: {
            allowDecimals: false,
            title: { text: ''},
            min: 0,
            max: 100,
            labels: {
                formatter:function() {
                    console.log(this.value); //0, 25, 50 , 75 , 100
                    var pcnt = (this.value / 100) * 100;
                    return pcnt + '%';
                }
            }
        },
        credits: {
          enabled: false
        },
        series: [
            {
                name: 'Students',
                data: this._studentAttendance,
                color: '#3366cc'
            },{
                name: 'Staff',
                data: this._staffAttendance,
                color: '#accbfc',
            }
        ]
    };

但工具提示现在显示值但不在值后显示“％” . 怎么做？对不起，我是highcharts的新手 . 先谢谢你们 .

javascript angular highcharts

2 回答

  • 0

    您需要告诉Highcharts工具提示的格式 . 为此，highcharts对象中有 tooltip 部分 . 要在每个值之后呈现'%'，您可以使用以下代码段：

    [...]
credits: {
  enabled: false
},
tooltip: {
  valueSuffix: '%'
},
series: [{
[...]

    请参阅http://api.highcharts.com/highcharts/tooltip以供参考

    回复于
  • 2

    您可以使用工具提示格式化程序功能在图表工具提示上显示％ . 它是一个回调函数，用于从头开始格式化工具提示的文本 . 返回false以禁用系列上特定点的工具提示 .

    支持HTML的子集 . 除非useHTML为true，否则工具提示的HTML将被解析并转换为SVG，因此这不是一个完整的HTML呈现器 . 支持以下标记：

    <b> , <strong>, <i>, <em>, 
    , <span>.

    您可以参考以下示例代码：

    chart = new Chart({
    chart: {
        type: 'line'
    },
    title: {
        text: 'Linechart'
    },
    credits: {
        enabled: false
    },
    tooltip: {
        formatter: function() {
            return this.y + '%';
        }
    },
    series: [{
        name: 'Line 1',
        data: [1, 2, 3]
    }]
});
    回复于

相关问题