Google柱形图线条点

时间:2016-01-18 07:07:09

标签: php charts google-visualization

以下是我的Google Combo Chart代码,它运行正常。我还将输出附加为图像。 enter image description here 我的新要求是在第二张图片中 enter image description here

即我希望置信线气泡应显示各自的值,现在只显示悬停。我已经尝试过Chart的注释属性,但它只适用于bar列,我想在上面的行中工作,即置信线。请回复

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 个答案:

答案 0 :(得分: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>