Как правильно показать подсказку для высоких стульев, когда высота мала?

Я использую стульчики в таблице сетки (щ сетки) и у меня есть высота ячейки 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

Вы можете создать поле всплывающей подсказки и текст, чтобы он соответствовал. Но вы по сути делаете диаграмму типа искры. Не могли бы вы использовать 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

Как правильно показать подсказку для высоких стульев, когда высота мала?

ответ

Смежные вопросы