Question

我有一个向下钻取图表，其中前三个级别是柱形图，第四个级别是饼图，我希望在每个级别上应该更改工具提示。我无法以编程方式更改它。是否有任何功能可以更改工具提示。这是代码 -

var chartLevel = 0; //gloabal variable
function drawYearlyChart(val)
{
  var arr = val.toString().split("\n");
  var chart;
  var colors = Highcharts.getOptions().colors,
      categories = eval(arr[0].toString()),
      name = 'Yearly Report',
      data = eval(arr[1].toString());

  function setChart(name, categories, data, color,type) {
    chart.xAxis[0].setCategories(categories);
    chart.series[0].remove();
    chart.setTitle();
    if(chartLevel==1)
    {
      chart.yAxis[0].axisTitle.attr({text: 'Number of question'});

      //Here i want some function to change the tooltip of column chart
    }
    chart.addSeries({
      name: name,
      data: data,
      color: color || colors[0],
      type: type || 'column'
    });
    if(chartLevel==3)
    {
      chartLevel = 0;
      chart.yAxis[0].axisTitle.attr({text: 'Number of sessions'});
    }
    else
      chartLevel++;
  }

  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chart',
      type: 'column'
    },
    title: {
      text: 'Your yearly report till now'
    },
    subtitle: {
      text: 'Click the columns to view report for that particular period.'
    },
    xAxis: {
      categories: categories
    },
    yAxis: {
      title: {
        text: 'Number of session'
      },
      allowDecimals: false,
      id: 'yXis'
    },
    plotOptions: {
      column: {
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              var drilldown = this.drilldown;
              if (drilldown) { // drill down
                setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type);
              } else { // restore
                setChart(name, categories, data);
              }
            }
          }
        },
        dataLabels: {
          enabled: true,
          color: colors[0],
          style: {
            fontWeight: 'bold'
          },
          formatter: function() {
            return this.y +'';
          }
        },
        tooltip: {
          pointFormat: '<span style="color:{series.color}">{point.name}</span>: <b>{point.y}</b><br/>Click to view {point.name} report',
          valueSuffix: ' Sessions'
        }
      },
      pie: {
        showInLegend: true,
        dataLabels: {
          enabled: true,
          formatter: function(){
            return (this.y+' Questions<br>'+this.percentage+'%');
          }
        },
        tooltip:{
          pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/> Click to return to yearly report',
          valueSuffix: ' quesitons'
        },
        events: {
          click: function(){
            var drilldown = this.drilldown;
            if (drilldown) { // drill down
              setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type);
            } else { // restore
              setChart(name, categories, data);
            }
          }
        }
      }
    },
    series: [{
      name: name,
      data: data,
      color: '#4572A7'
    }],
    exporting: {
      enabled: false
    }
  });
}

任何建议或解决方案都是适用的。感谢

Answer 1

您可以使用tooltip formater功能更改工具提示的内容。有关详细信息和示例，请参阅文档：http://api.highcharts.com/highcharts#tooltip.formatter

此函数在其上下文（this.myProp）中获取多个属性，您可以使用它在任何图表系列上创建所需的输出。

如何在highchart中以编程方式更改柱形图的工具提示

1 个答案: