Question

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

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的新手。先谢谢你们。

Answer 1

您需要告诉Highcharts工具提示的格式。为此，highcharts对象中有[...] credits: { enabled: false }, tooltip: { valueSuffix: '%' }, series: [{ [...]部分。要在每个值后面呈现'％'，您可以使用以下代码段：

application:supportedInterfaceOrientationsForWindow:

请参阅http://api.highcharts.com/highcharts/tooltip以获取参考资料

Answer 2

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

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

 <b> , <strong>, <i>, <em>, <br/>, <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]
    }]
});

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

2 个答案: