2016-10-20 6 views
2

В настоящее время я работаю над Google Chart с помощью ASP.NET и подключаю его к базе данных (SQL Server). Но у меня проблема при попытке настроить подсказку.Google Chart Tooltip не работает

Вот заголовок Код:

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

К сожалению, подсказка не работает. На дисплее подсказки отображаются только имя клиента и процентное соотношение.

Sample Generated Chart

+0

Что вы хотите всплывающую подсказку для отображения? –

+0

@MarcusH Привет, marcus, я бы хотел отобразить клиента, представить процент и подсказку 1 – Jeffren

+0

Работает ли это, если вы просто напишете график после цикла? положить «chart.draw (данные)»; после окончания цикла и прокомментировать часть после –

ответ

2

, к сожалению, Column Roles, включая всплывающие подсказки, не работают с Материал диаграмм, только Ядро

Материал ->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 TIP\n' + 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' событие происходит Картографическая ...

+0

, она работает, спасибо! – Jeffren

+0

'примечание 3' помогло мне .. спасибо –

+0

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

0

мне нужно отдать должное Кэтрин Манцо в форме Google Charts для выяснения этого. Удалить focusTarget с графиком Опции и бинго !!

Catherine Manzo сказал: я, наконец, вернулся и сравнил 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}}; 
Смежные вопросы