2016-01-18 3 views
0

Ниже приведен код Google Combo Chart, и он отлично работает. Я также добавил вывод в качестве изображения. enter image description here Моего новое требование на втором изображении enter image description hereGoogle Колонка диаграммы точки линии

то есть я хочу пузыри уверенности линии должны отображать их соответствующие значения, теперь он показывает только при наведении курсора мыши. Я пробовал свойство аннотации диаграммы, но он работает только для столбцов столбцов, я хочу работать с ним в вышеприведенной строке. Линии доверия. Пожалуйста, ответьте

var data3 = google.visualization.arrayToDataTable([['Staff','Understanding','Confidence','Hurdle'], 
['Customer Planning',40,95,80], 
['Passionate Selling',63,93,80], 
['Negotiating Revenue & Profit Growth',60,92,80], 
['Category & Shopper Execution',60,90,80], 
['Value Chain Integration',76,98,80]]); 

    var options = {title:"Staff Details", 
       width:'100%', height:600,seriesType: "bars",series:{1: {type: "line",pointSize: 6},2: {type: "line",pointSize: 6}}, 
       vAxis: {title: "", 'minValue': 0, 'maxValue': 100}, 
       colors: ['#259edd', '#ffc000', '#ff0000'], 
       hAxis: {title: "Competency",'minValue': 0, 'maxValue': 100, slantedText: true, slantedTextAngle:60 }, 
       chartArea: {height: '60%',top:10} 
     };   

    var chart   = new google.visualization.ComboChart(bar_chart_div); 
    chart.draw(data3, options); 

ответ

1

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

google.load('visualization', '1.0', {'packages':['corechart']}); 
 
google.setOnLoadCallback(drawDashboard); 
 

 
function drawDashboard() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Name', 'Donuts eaten'], 
 
    ['Michael' , 5], 
 
    ['Elisa', 7], 
 
    ['Robert', 3], 
 
    ['John', 2], 
 
    ['Jessica', 6], 
 
    ['Aaron', 1], 
 
    ['Margareth', 8] 
 
    ]); 
 

 
    var options = { 
 
    title: 'Company Performance', 
 
    curveType: 'function', 
 
    legend: { position: 'bottom' }, 
 
    pointSize: 10 
 
    }; 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, { 
 
    calc: "stringify", 
 
    sourceColumn: 1, 
 
    type: "string", 
 
    role: "annotation" 
 
    }]); 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('chart')); 
 
    chart.draw(view, options); 
 
}
<script src="https://www.google.com/jsapi"></script> 
 
<div id="chart"></div>

+1

Спасибо за ответ. Аннотации на самом деле не нужны. Мое требование - это точно второе изображение. –

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