如何在高度較小時正確顯示高腳凳的工具提示？

我用網表（UI格）高腳椅和我有細胞高度20px如何在高度較小時正確顯示高腳凳的工具提示？

如何顯示工具提示正確？

這是我DEMO

我的代碼：

$(function() { 
    Highcharts.setOptions({ // This is for all plots, change Date axis to local timezone 
    global: { 
     useUTC: false 
    } 
    }); 

    var chart = new Highcharts.Chart({ 

    chart: { 
     type: 'bar', 
     width:160, 
     height:20, 
     renderTo: 'container', 
     margin: [0, 0, 0, 0], 
     backgroundColor: 'transparent' 
    }, 
    title: { 
     text: '' 
    }, 
    credits: { 
     enabled: false 
    }, 
    xAxis: { 
     labels: { 
     enabled: false 
     } 
    }, 
    yAxis: { 
     //max: 1, 
     maxPadding: 0, 
     minPadding: 0, 
     gridLineWidth: 0, 
     endOnTick: false, 
     labels: { 
     enabled: false 
     } 
    }, 
    legend: { 
     enabled: false 
    }, 
    tooltip: { 
            //enabled: false, 
            formatter: function() { 
             return '<b>' + this.series.name + '</b>: ' + this.point.y 
            } , 
            //positioner: function(boxWidth, boxHeight, point) { 
            //  return {x:point.plotX,y:point.plotY-20}; 
            // } 
           }, 
    plotOptions: { 
     series: { 
     borderWidth: 0, 
     //pointHeight:20, 
          stacking: 'normal', 
          states:{ 
           hover:false 
          }, 
     //enableMouseTracking: false, 
     lineWidth: 1, 
     shadow: false, 
     states: { 
      hover: { 
      lineWidth: 1 
      } 
     }, 
     animation: false 
     } 
    }, 
    series: [ 
     { 
     "name": "Open", 
     "nameStr": "Open", 
     "id": "open", 
     "data": [ 
      { 
      "extras": {}, 
      "y": 1, 
      "color": "#c44a53" 
      } 
     ] 
     }, 
     { 
     "name": "In Progress", 
     "nameStr": "In Progress", 
     "id": "in progress", 
     "data": [ 
      { 
      "extras": {}, 
      "y": 0, 
      "color": "#71dedf" 
      } 
     ] 
     }, 
     { 
     "name": "Almost Done", 
     "nameStr": "Almost Done", 
     "id": "almost done", 
     "data": [ 
      { 
      "extras": {}, 
      "y": 0, 
      "color": "#5dcfd0" 
      } 
     ] 
     }, 
     { 
     "name": "Done", 
     "nameStr": "Done", 
     "id": "done", 
     "data": [ 
      { 
      "extras": {}, 
      "y": 0, 
      "color": "#47b9c7" 
      } 
     ] 
     }, 
     { 
     "name": "Closed", 
     "nameStr": "Closed", 
     "id": "closed", 
     "data": [ 
      { 
      "extras": {}, 
      "y": 0, 
      "color": "#a7b75b" 
      } 
     ] 
     }, 
     { 
     "name": "On Hold", 
     "nameStr": "On Hold", 
     "id": "on hold", 
     "data": [ 
      { 
      "extras": {}, 
      "y": 0, 
      "color": "#eaeaea" 
      } 
     ] 
     } 
    ] 

    }); 
});

來源

2016-08-30 snaggs

您可以設置工具提示框和文本的樣式以使其合適。但是，你基本上在做一個sparkline型的圖表。你可以用datalabel來顯示值嗎？ – wergeld

您可以像這樣使用自定義工具提示的解決方法：http://stackoverflow.com/questions/17680627/highcharts-tooltip-cropping –

可以樣式的工具提示文本元素和其他項目，使它們變得更小。在什麼時候這變得不可讀取取決於您的用戶測試。喜歡的東西：

tooltip: { 
    formatter: function() { 
    return '<b>' + this.series.name + '</b>: ' + this.point.y 
    }, 
    style: { 
    "color": "#333333", 
    "cursor": "default", 
    "fontSize": "10px", //default is 12px 
    "padding": "1px", //default is 8px 
    "pointerEvents": "none", 
    "whiteSpace": "nowrap" 
    } 
},

在這裏，我已經設置了padding爲1px和fontSize爲10px。

來源

2016-08-30 15:31:07 wergeld

如何在高度較小時正確顯示高腳凳的工具提示？

回答

相關問題