Question

我正在修改图形中Highchart JS的工具提示。但是产量没有达到我的预期。我想在工具提示的右侧打印百分比。

示例：对忠诚度满意：4（20％）

我已经添加了两个数组，以根据一系列图形在工具提示的右侧添加valueSuffix。但它会在单个工具提示上打印所有数组值。

我已经尝试过下面的代码来修改Highchart。

$(function() {
  $('#container').highcharts({
    title: {
      text: ''
    },
    charts: {
      zoomType: 'xy',
    },
    exporting: {
      enabled: false
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ],
    },
    yAxis: {
      title: '',
    },
    labels: {
      items: [{
        style: {
          left: '50px',
          top: '18px',
        }
      }]
    },
    tooltip: {
      shared: true,
    },
    credits: {
      enabled: false
    },
    plotOptions: {
      series: {
        label: {
          enabled: false
        },
      },
      column: {
        states: {
          hover: {
            color: '#90D0FF'
          }
        }
      }
    },
    series: [{
        type: 'column',
        name: 'Provide Feedback',
        data: [10, 4, 5, 6, 8, 9, 2, 3, 4, 5, 6, 9],
        color: 'yellow'
      },
      {
        name: 'Satisfied to Loyal',
        type: 'spline',
        data: [2, 5, 4, 3, 2, 3, 7, 8, 9, 5, 4, 3],
        color: '#55BF3B',
        dataLabels: {
          enabled: false
        },
        tooltip: {
          valueSuffix: [' (1%)', ' (2%)', ' (18%)', ' (10%)', ' (3%)', ' (1%)', ' (1%)', ' (6%)', ' (4%)', ' (1%)', ' (8%)', ' (70%)'],
          // valueSuffix: ' (val %)',
        },
        marker: {
          lineWidth: 4,
          fillColor: 'white',
          width: 16,
          height: 16
        }
      },
      {
        name: 'Unhappy to Satisfied',
        type: 'spline',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 5, 4],
        color: '#FFC800',
        tooltip: {
          valueSuffix: [' (10%)', ' (12%)', ' (1%)', ' (100%)', ' (30%)', ' (10%)', ' (10%)', ' (60%)', ' (34%)', ' (10%)', ' (98%)', ' (40%)'],
          // valueSuffix: ' (val %)',
        },
        marker: {
          lineWidth: 4,
          fillColor: 'white',
          width: 16,
          height: 16
        }
      }
    ]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

非常感谢任何帮助。

Answer 1

您可以从pointFormatter函数中图表之外的数组中获取后缀：

var valueSuffix1 = [' (1%)', ' (2%)', ' (18%)', ' (10%)', ' (3%)', ' (1%)', ' (1%)', ' (6%)', ' (4%)', ' (1%)', ' (8%)', ' (70%)'];

var valueSuffix2 = [' (10%)', ' (12%)', ' (1%)', ' (100%)', ' (30%)', ' (10%)', ' (10%)', ' (60%)', ' (34%)', ' (10%)', ' (98%)', ' (40%)'];

$('#container').highcharts({

    ...

    tooltip: {
        shared: true,
        pointFormatter: function() {
            var suffix = '';

            if (this.series.index === 1) {
                suffix = valueSuffix1[this.index]
            } else if (this.series.index === 2) {
                suffix = valueSuffix2[this.index]
            }

            return '<span style="color:' + this.color + '">\u25CF</span> ' + this.series.name + ': <b>' + this.y + '</b>' + suffix + '<br/>'
        }
    }
});

实时演示：http://jsfiddle.net/BlackLabel/8L5q7h4d/

API参考：https://api.highcharts.com/highcharts/tooltip.pointFormatter

Answer 2

您可以从XAxis使用工具提示的格式化程序功能。取而代之的是百分比，您可以在工具提示格式here is plunker

期间使用数据计算动态

enter code here
$(function () {
       $('#container').highcharts({
           title: {
       text: ''
     },
     charts: {
       zoomType: 'xy',
     },
     exporting: { enabled: false },
     xAxis: {
       categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                   'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     },
     yAxis: {
       title: '',
     },
     labels: {
       items: [{
         style: {
           left: '50px',
           top: '18px',
         }
       }]
     },
     tooltip: {
       formatter: function () {
            var s = '<b>' + this.x + '</b>';
            let total = this.points[0].y;
            let happy =  this.points[1].y;
            let unhappy =  this.points[2].y;
            s += '<br/> Provide Feedback : ' +
                    total + '';
            s += '<br/>Satisfied to Loyal: ' +
            (happy/total)*100 + '%';
            s += '<br/>Unhappy to Satisfied: ' +
                    (unhappy/total)*100 + '%';
            return s;
        },
       shared: true,
     },
     credits: {
       enabled: false
     },
     plotOptions: {
       series: {
         label: {
           enabled: false
         },
       },
       column: {
         states: {
           hover: {
             color: '#90D0FF'
           }
         }
       }
     },
     series:
       [
         {
           type: 'column',
           name: 'Provide Feedback',
           data: [10,4,5,6,8,9,2,3,4,5,6,9],
           color: 'yellow'
         },
         {
           name: 'Satisfied to Loyal',
           type: 'spline',
           data: [2,5,4,3,2,3,7,8,9,5,4,3],
           color: '#55BF3B',
           dataLabels: {
             enabled: false
           },
           marker: {
             lineWidth: 4,
             fillColor: 'white',
             width: 16,
             height: 16
           }
         },
         {
           name: 'Unhappy to Satisfied',
           type: 'spline',
           data: [1,2,3,4,5,6,7,8,9,0,5,4],
           color: '#FFC800',
           marker: {
             lineWidth: 4,
             fillColor: 'white',
             width: 16,
             height: 16
           }
         }
       ]
       });
   });

Highchart Js中的工具提示修改

2 个答案: