Как я могу принести всплывающую подсказку к вершине диаграммы

теперь у меня есть график Google, как этого сильфон картинкаКак я могу принести всплывающую подсказку к вершине диаграммы

enter image description here

Теперь я хочу, чтобы переместить всплывающую подсказку к верхней части графика (не заботятся положение моей мыши).

Как это сделать.

Вот мой код:

var chartData = new google.visualization.DataTable(); 
chartData.addColumn('string', 'Time'); 
chartData.addColumn('number', 'Average Score'); 
chartData.addColumn({ 'type': 'string', 'role': 'tooltip', 'p': { 'html': true } }); 

chartData.addRows(data); 

var options = { 
    chartArea: { left: 0, top: 100, width: "100%", height: "100%" }, 
    title: '', 
    opacity: 100, 
    backgroundColor : {fill: '#000'}, 
    hAxis: { 
     textPosition: 'none', 
     titleTextStyle: {color: '#333'}, 
     titleTextStyle: {color: '#2902A3'}, 
    }, 
    vAxis: { 
     textPosition: 'none', 
     opacity: 100, 
     minValue: 0, 
     gridlines: { color: '#0D2B56', count: 10 }, 
     baselineColor: 'white', 
    }, 
    series:{ 
     0:{ 
      color: '#3C93FF', 
      areaOpacity: '0.68' 
     } 
    }, 
    crosshair: { 
     orientation: 'vertical', 
     trigger: 'focus', 
     color: '#fff' 
    }, 
    legend: 'none', 
    tooltip: {isHtml: true}, 
}; 


google.load("visualization", "1", { packages: ["corechart"] }); 
var chart = new google.visualization.AreaChart(document.getElementById('chart')); 
chart.draw(chartData, options);

Я также использовать эту функцию для создания контента TOOLTIP в

var createToolTip = function (name, value) { 
    return '<div class="googletooltip" ><span>' + name + ':</span><span style="padding-left:20px" >' + value + '</span></div>'; 
}

и этот стиль также

.googletooltip{ 
    color:#fff; 
    border-style: solid; 
    border-width: 2px; 
    border-color: #3882C4; 
    background: #000; 
    padding:2px 15px 2px 15px; 
    font-weight: bold; 
}

Спасибо большое

источник

2015-01-06 Võ Quang Hòa

Можете ли вы показать коды, которые вы используете для диаграммы, а также свойств подсказки выше? –

Попробуйте добавить top и свойство position для класса .googletooltip. Если нет, попробуйте использовать свойство margin, если другие свойства не работают. Работать вокруг этих трех свойств и посмотреть, сможете ли вы перемещать всплывающую подсказку. Дайте мне знать, если он все еще не работает.

.googletooltip{ 
color:#fff; 
border-style: solid; 
border-width: 2px; 
border-color: #3882C4; 
background: #000; 
padding:2px 15px 2px 15px; 
font-weight: bold; 
}

источник

2015-01-06 04:18:33

Я также думаю, что могу изменить стиль всплывающей подсказки. Но у меня нет опыта в html, css, так, можете ли вы предложить мне, какие элементы стиля (и значение) должны быть добавлены здесь? –

Попробуйте добавить свойство top или position внутри вашего класса .googletooltip. Если эти два свойства не влияют на положение всплывающей подсказки, вместо этого используйте свойство margin. Все эти свойства должны находиться внутри вашего класса .googletooltip. –

Где вы называете функцию createToolTip? Вызывается ли это при генерации данных chartData.addRows(data);?

Ref: проверить, как createCustomHTMLContent функции используются @https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#custom_html_content

источник

2015-01-06 04:53:06

Я создал пользовательскую подсказку, используя html-контент, и он работает. Но мой вопрос заключается в том, как переместить всплывающую подсказку в начало диаграммы. Я плохо разбираюсь в html, css, поэтому я не знаю, как это сделать. –

В этом случае вам нужно будет использовать свойства position/top/margin, предложенные 宿命的な孤独. См. Http://www.w3schools.com/css/css_positioning.asp для понимания того, как это работает. –

Как я могу принести всплывающую подсказку к вершине диаграммы

ответ

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