immer Tooltip zeigt für alle Spalten in Highcharts

Question

Hier ist ein Säulendiagramm - https://jsfiddle.net/kx8qqh2e/

Wenn Sie auf einer Säule schweben, es zeigt einen schönen Tooltip. Ich möchte die QuickInfos jederzeit in allen Spalten anzeigen, ohne dass der Benutzer den Mauszeiger darüber bewegen muss. Wie kann ich das erreichen?

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

Hoffentlich This Fiddle beantwortet Ihre Frage.

Der gewünschte Effekt wurde mit der plotOptionsAPI link here Direktive in Highcharts erreicht.

$(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>

Answer 2

Aus Gründen der Klarheit und der Nachwelt:

Sie können die Standard-tooltip ausschalten, und verwenden Sie die dataLabels Ihr Ziel zu erreichen.

Standardmäßig wird eine kleine Beschriftung mit dem y-Wert der Spalte über der Spalte platziert.

Sie können die umfangreichen Konfigurationsmöglichkeiten nutzen und die formatter Funktion, dieses Etikett in einer Vielzahl von Möglichkeiten anpassen, so dass es wie das Standard-tooltip

Beispiel für eine hohen angepasste Version der dataLabel machen:

Code:

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>'; 
     } 
    } 
    } 
}, 

Fiddle:

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

Ausgang:

[{EDIT -

Und da wie diese große Etiketten aufweisen, können als störend empfunden werden, wenn w Hut Sie die Daten nur wird sehen aufgetragen wirklich tun möchte, ist hier eine Version mit einer Taste, um die Sichtbarkeit der Etiketten zu wechseln:

Fiddle:

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

Code:

<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}]