#javascript #jquery #sql-server #json #google-visualization
#javascript #jquery #sql-сервер #json #google-визуализация
Вопрос:
В настоящее время я работаю над Google Chart, используя ASP.NET и подключение его к базе данных (SQL Server). Но у меня проблема при попытке настроить всплывающую подсказку.
Вот код заголовка:
<script src="js/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('1.1', { 'packages': ['bar'] });
</script>
<script type="text/javascript">
$(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'sample_page.aspx/GetChartData',
data: '{}',
success: function (response) {
drawchart(response.d); // calling method
},
error: function () {
alert("Error Loading Data");
}
});
})
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.charts.Bar(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted')
data.addColumn({type: 'string', role: 'tooltip'});
for (var i = 0; i < dataValues.length; i ) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted '%'},'TEST TOOL TIP']);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
chart.draw(view,
{
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
}
</script>
К сожалению, всплывающая подсказка не работает. Во всплывающей подсказке отображается только имя клиента и процентное соотношение.
Комментарии:
1. Что вы хотите, чтобы всплывающая подсказка отображалась?
2. @MarcusH Привет, Маркус, я хотел бы отобразить клиента, отправить процент и подсказку 1
3. Работает ли это, если вы просто пишете диаграмму после цикла? поместите «chart.draw (данные);» после окончания цикла и прокомментируйте часть после
Ответ №1:
к сожалению, роли столбцов, включая всплывающие подсказки, не работают с диаграммами материала, только с основными
Материал —> packages: ['bar'] google.charts.Bar
Ядро —> packages: ['corechart'] google.visualization.BarChart
вы можете использовать следующий параметр конфигурации, чтобы получить ядро, близкое к внешнему виду материала
theme: 'material'
примечание 1: при использовании столбца всплывающей подсказки должно быть предоставлено все содержимое всплывающей подсказки, оно ничего не добавляет к всплывающей подсказке по умолчанию
смотрите следующий рабочий фрагмент…
google.charts.load('current', {
callback: function () {
// simulate data
dataValues = [
{
customer: 'Customer A',
percent_submitted: 10
},
{
customer: 'Customer B',
percent_submitted: 20
},
{
customer: 'Customer C',
percent_submitted: 30
},
];
drawchart(dataValues);
},
packages: ['corechart']
});
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.visualization.BarChart(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted')
data.addColumn({type: 'string', role: 'tooltip'});
for (var i = 0; i < dataValues.length; i ) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted '%'},
dataValues[i].customer 'nTEST TOOL TIPn' dataValues[i].percent_submitted '%']);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
chart.draw(view,
{
theme: 'material',
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
} <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div> примечание 2: для работы всплывающих подсказок HTML необходимо включить свойство столбца
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
смотрите следующий рабочий фрагмент…
google.charts.load('current', {
callback: function () {
// simulate data
dataValues = [
{
customer: 'Customer A',
percent_submitted: 10
},
{
customer: 'Customer B',
percent_submitted: 20
},
{
customer: 'Customer C',
percent_submitted: 30
},
];
drawchart(dataValues);
},
packages: ['corechart']
});
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.visualization.BarChart(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted')
// include column property for html tooltips
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
for (var i = 0; i < dataValues.length; i ) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted '%'},
// need to include own styling as well
'<div class="ggl-tooltip">' dataValues[i].customer '<div>TEST TOOL TIP</div><div>' dataValues[i].percent_submitted '%</div></div>']);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);
chart.draw(view,
{
theme: 'material',
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
} .ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 12pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
} <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div> примечание 3: что касается диаграмм материалов, они по умолчанию отображают форматированное значение ( f: ), поэтому вы можете добавить немного текста туда или в конец заголовков столбцов, что было бы для всех строк
смотрите следующий рабочий фрагмент…
google.charts.load('current', {
callback: function () {
// simulate data
dataValues = [
{
customer: 'Customer A',
percent_submitted: 10
},
{
customer: 'Customer B',
percent_submitted: 20
},
{
customer: 'Customer C',
percent_submitted: 30
},
];
drawchart(dataValues);
},
packages: ['bar']
});
function drawchart(dataValues) {
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
// Instantiate and draw our chart, passing in some options
var chart = new google.charts.Bar(document.getElementById('BarChartsDIV'));
var data = new google.visualization.DataTable();
data.addColumn('string', 'customer');
data.addColumn('number', 'percent_submitted n OTHER TOOLTIP TEXT FOR ALL ROWS')
for (var i = 0; i < dataValues.length; i ) {
data.addRow([dataValues[i].customer,
{ v: dataValues[i].percent_submitted, f: dataValues[i].percent_submitted '% TEST TOOL TIP'}]);
}
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
chart.draw(view,
{
tooltip: { isHtml: true},
title: "",
legend: { position: 'none' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: '' }, // Top x-axis.
},
y: {
0: { label: '' } //Side y-axis
}
},
bar: { groupWidth: '70%' },
});
} <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="BarChartsDIV"></div> примечание 4: хотя это и не рекомендуется, можно изменить всплывающую подсказку вручную через SVG DOM при срабатывании 'ready' события диаграммы…
Комментарии:
1. Можете ли вы уточнить и показать, как получить панель разных цветов? спасибо, я попробовал ваш рабочий код, но не смог настроить цвета панели
2. Спасибо, подсказка v: и f: была действительно полезной
Ответ №2:
Добавление к примечанию.
примечание 5:
Изменить можно, только tooltip если вы используете google.visualization вот так:
new google.visualization.LineChart(divChart).draw(dataTable,options);
Не google.charts :
new google.charts.Line(divChart).draw(dataTable,options);
Но не забудьте включить theme: 'material' в опции google.visualization обновление темы.
Ответ №3:
Я должен отдать должное Кэтрин Манзо в форме Google Charts за то, что она выяснила это. Удалите focusTarget из параметров диаграммы и бинго!!
Кэтрин Манзо сказала: Я, наконец, вернулась и сравнила HTML-код для моих новых диаграмм с теми, которые были сделаны летом, когда всплывающая подсказка работала. Я понял, что в более новом коде был дополнительный атрибут (focusTarget), и когда я удалил его, функция всплывающей подсказки снова начала работать! Атрибут для удаления выделен в приведенном ниже коде:
chart.opts = {title:"Company Performance",titlePosition:"out",focusTarget:"default",colors:['#66CDAA','#E0FFFF'],pointShape:"circle",hAxis: {format:"$ #,###.##",textPosition:"default",title:"In Thousands",slantedText:true,viewWindowMode:"default"},tooltip:{isHtml:false}};