%未显示在工具提示饼图highcharts angular js中

时间:2016-07-12 16:17:43

标签: javascript angularjs highcharts pie-chart

enter image description here%符号未在高级图表中显示

ageData = {
  chartConfig: {
    options: {

      chart: {
        type: 'pie',
        width: 275,
        height: 220,
        marginTop: 70
      },
      plotOptions: {

        pie: {
          size: 100,
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            style: {
              color: '#2A9ACC',
              fontFamily: 'proximanovalight',
              textShadow: 0
            }
          }

        }
      }
    },

    title: {
      text: 'Age',
      style: {
        color: '#2A9ACC',
        font: '16px proximanovalight'
      }
    },

    tooltip: {

      pointFormat: '{series.name}: <b>' + this.point.percentage + ' % </b>'
    },
    series: [{
        name: "Age",
        minPointWidth: 20,
        showInLegend: false,
        colorByPoint: true
      }

    ],
    loading: false
  }

}

我添加了一些链接中指定的工具提示格式化程序,但没有运气。我不确定这个问题的原因。如果您需要更多详细信息,请与我们联系。很高兴提供。任何帮助将非常感激。提前致谢

2 个答案:

答案 0 :(得分:0)

根据Highcharts Pie documentation,您需要更改以下行:

pointFormat: '{series.name}: <b>' + this.point.percentage + ' % </b>'

对于这样的事情:

pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

答案 1 :(得分:0)

您好我找到了问题的解决方案。看来我必须在config的options部分中指定工具提示,如下所示:

                                        chartConfig : {
                                                                    options : {

                                                                        chart : {
                                                                            type : 'pie',
                                                                            width : 275,
                                                                            height : 220,
                                                                            marginTop : 70
                                                                        },

                                                                        tooltip : {
                                                                            pointFormat : '{series.name}: {point.percentage:.1f}%',
                                                                        },
                                                                        plotOptions : {

                                                                            pie : {
                                                                                size : 100,
                                                                                allowPointSelect : true,
                                                                                cursor : 'pointer',
                                                                                dataLabels : {
                                                                                    enabled : true,
                                                                                    style : {
                                                                                        color : '#2A9ACC',
                                                                                        fontFamily : 'proximanovalight',
                                                                                        textShadow : 0
                                                                                    }
                                                                                }

                                                                            }
                                                                        }
                                                                    },

                                                                    title : {
                                                                        text : 'Age',
                                                                        style : {
                                                                            color : '#2A9ACC',
                                                                            font : '16px proximanovalight'
                                                                        }
                                                                    },

                                                                    series : [ {
                                                                        name : "Age",
                                                                        minPointWidth : 20,
                                                                        showInLegend : false,
                                                                        colorByPoint : true
                                                                    }

                                                                    ],
                                                                    loading : false
                                                                }

非常感谢您的回复。非常感谢