Question

这是一个柱形图 - https://jsfiddle.net/kx8qqh2e/

当您将鼠标悬停在某列上时，它会显示一个很好的工具提示。我希望始终在所有列上显示工具提示，而无需用户将鼠标悬停在它们上面。我怎样才能做到这一点？

var chart_data;
    chart_data = {
      chart: {
        type: 'column',
        backgroundColor: '#FBFBFB',
        plotBackgroundColor: '#FBFBFB'
      },
      title: {
        text: '<b>Category-Wise APF</b>',
        verticalAlign: 'bottom',
        useHTML: true,
        style: {
          color: '#454545',
          fontSize: '14px'
        },
        y: 13
      },
      xAxis: {
        type: 'category'
      },
      yAxis: {
        labels: {
          enabled: false
        },
        title: '',
        gridLineColor: '#EFEFEF'
      },
      credits: {
        enabled: false
      },
      legend: {
        enabled: false
      },
      tooltip: {
        pointFormat: '<b>{point.y}</b>'
      },
      series: [
        {
          colorByPoint: true,
          data: [
            {
              name: 'Sports & Fitness',
              y: 1.34,
              color: '#2E91A4'
            }, {
              name: 'Fashion Apparels',
              y: 1.29,
              color: '#3196A5'
            }, {
              name: 'Women\'s Clothing',
              y: 1.24,
              color: '#2F9BA6'
            }, {
              name: 'Footwear',
              y: 1.23,
              color: '#319FA7'
            }, {
              name: 'Clothing & Apparels',
              y: 1.21,
              color: '#34A3A8'
            }, {
              name: 'Audio Equipments',
              y: 1.20,
              color: '#36A3A8'
            }, {
              name: 'Home Decor',
              y: 1.13,
              color: '#38ADAA'
            }, {
              name: 'Health & Personal Care',
              y: 1.12,
              color: '#38B1AB'
            }, {
              name: 'Mobile Accessories',
              y: 1.12,
              color: '#39B7AB'
            }, {
              name: 'Computer Accessories',
              y: 1.11,
              color: '#3DBBAD'
            }
          ]
        }
      ]
    };
    $('#categorywise-apf-graph').highcharts(chart_data);

Answer 1

为了清晰和后人：

您可以关闭标准tooltip，并使用dataLabels来完成目标。

tooltip: { 
  enabled: false,
  crosshairs: true
},
plotOptions: {
  series: {
    dataLabels: {
      enabled: true
    }
  }
}

默认情况下，列的y值小标签将放在列的上方。

您可以使用广泛的配置选项和formatter功能，以多种方式自定义此标签，使其更像标准tooltip

dataLabel的高度自定义版本的示例：

<强>代码：

plotOptions: {
  series: {
    dataLabels: { 
      enabled: true, 
      inside: false,
      overflow: 'none',
      crop: true,
      shape: 'callout',
      backgroundColor:'rgba(0,0,0,0.8)',
      borderColor: 'rgba(0,0,0,0.9)',
      color: 'rgba(255,255,255,0.75)',
      borderWidth: .5,
      borderRadius: 5,
      y: -10,
      style: {
        fontFamily: 'Helvetica, sans-serif',
        fontSize: '10px',
        fontWeight: 'normal',
        textShadow: 'none'
      },
      formatter: function() {
        return '<strong>'+this.series.name+'</strong>'
                    +'<br/>Group: <strong>'+ this.x+'</strong>'
              +'<br/>Value: <strong>'+ Highcharts.numberFormat(this.y,0)+'</strong>';
      }
    }
  }
},

<强>小提琴：

http://jsfiddle.net/jlbriggs/5t50dLow/

<强>输出：

[{EDIT -

而且，由于拥有这样的大标签可能会让您分心，因为您真正想要做的只是看到绘制的数据，这里有一个带按钮的版本可以切换标签的可见性：

小提琴：

http://jsfiddle.net/jlbriggs/5t50dLow/4/

代码：

<button id="toggle">Toggle Data Labels</button>
$('#toggle').click(function() {
  var enabled = chart.series[0].options.dataLabels.enabled;
  console.log(enabled);
  chart.series[0].update({ dataLabels: { enabled: !enabled }});
});

- / EDIT}]

Answer 2

希望This Fiddle回答你的问题。

您想要的效果是通过在highcharts中使用plotOptions API link here指令来实现的。

$(document).ready(function() {
  var chart_data;
  chart_data = {
    chart: {
      type: 'column',
      backgroundColor: '#FBFBFB',
      plotBackgroundColor: '#FBFBFB'
    },
    title: {
      text: '<b>Category-Wise APF</b>',
      verticalAlign: 'bottom',
      useHTML: true,
      style: {
        color: '#454545',
        fontSize: '14px'
      },
      y: 13
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      labels: {
        enabled: false
      },
      title: '',
      gridLineColor: '#EFEFEF'
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      series: {
        dataLabels: {
          align: 'left',
          enabled: true
        }
      }
    },
    series: [{
      colorByPoint: true,
      data: [{
        name: 'Sports & Fitness',
        y: 1.34,
        color: '#2E91A4'
      }, {
        name: 'Fashion Apparels',
        y: 1.29,
        color: '#3196A5'
      }, {
        name: 'Women\'s Clothing',
        y: 1.24,
        color: '#2F9BA6'
      }, {
        name: 'Footwear',
        y: 1.23,
        color: '#319FA7'
      }, {
        name: 'Clothing & Apparels',
        y: 1.21,
        color: '#34A3A8'
      }, {
        name: 'Audio Equipments',
        y: 1.20,
        color: '#36A3A8'
      }, {
        name: 'Home Decor',
        y: 1.13,
        color: '#38ADAA'
      }, {
        name: 'Health & Personal Care',
        y: 1.12,
        color: '#38B1AB'
      }, {
        name: 'Mobile Accessories',
        y: 1.12,
        color: '#39B7AB'
      }, {
        name: 'Computer Accessories',
        y: 1.11,
        color: '#3DBBAD'
      }]
    }]
  };
  $('#categorywise-apf-graph').highcharts(chart_data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>



<div style="width: 500px; height: 500px;" id="categorywise-apf-graph"></div>

始终在Highcharts中的所有列上显示工具提示

2 个答案: