本年度添加垂直线在谷歌可视化

Question

我需要在本年度增加一个垂直线（X轴）

配置选项在我的代码如下。

var options = { 
     title: '*****', 
     curveType: 'function', 
     height: 300, 
     legend: { position: 'bottom' }, 
     chartArea: {width: '80%'}, 
     pointSize:5, 
     width: 500, 
     annotation: { 
      1: { 
       style: 'line' 
      } 
     } 
    } 

请注意我已经使用这个注解，但问题是单独可见的位线。我需要一条全高的路线。

我全码：

var options = { 
     title: 'Chart', 
     curveType: 'function', 
     height: 300, 
     legend: { position: 'bottom' }, 
     chartArea: {width: '80%'}, 
     pointSize:5, 
     annotation: { height: 300 } 
    }, 

chartData = JSON.parse(window._data.chartData), chartPoint = new Array(), i = 0, j = 0; 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Year'); 
    data.addColumn('number', 'Google'); 
    data.addColumn('number', 'Yahoo'); 
    data.addColumn({type: 'boolean', role: 'certainty'}); 
    data.addColumn('number', 'Value'); 
    data.addColumn({type: 'boolean', role: 'certainty'}); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    if(Object.keys(chartData.myMap).length > 0) { 
     $.each(chartData.myMap, function(k, v) { 
      var val = Math.round(v * 100)/100; 
      chartPoint[i] = new Array(); 
      var cDate = new Date(); 
      if(cDate.getFullYear()==k) 
      chartPoint[i] = [k, val, null, false, null, false,k]; 
      else 
      chartPoint[i] = [k, val, null, false, null, false,null]; 
      i++; 
     }); 
     i--; 
    } 
    if(Object.keys(chartData.myDataMap).length > 0) { 
     $.each(chartData.myDataMap, function(k, v) { 
      var val = Math.round(v * 100)/100; 
      var val1 = Math.round(chartData.averageMap[k] * 100)/100; 
      if(j==0) {var l = val; j++; } else l = null; 
      chartPoint[i] = new Array(); 
      chartPoint[i] = [k,l,val,false,val1, false, null]; 
      i++; 
     }); 
    } 
    data.addRows(chartPoint); 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
    chart.draw(data, options); 

它应该是想在这个页面[01​​

Answer 1

我从你的小提琴三叉可能是沿着线的您正在寻找的东西：

data.addRow(["G", ' ', 'Foo annotation', 8, 1, 0.5]); 

​​- 使用注释，但只是放置一个空格不会打印，但仍绘制一条线。

---

 annotations: { 
      style: 'line', 
      textStyle: { 
       opacity: 0 
      } 
     } 

http://jsfiddle.net/Balrog30/W2JWa/2/ - 文本仍处于注释，但文字不透明度设置为0，这样的文字是完全透明的。

---

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

function drawVisualization() { 
    // example copied from Google Visualization API playground, 
    // modified for category axis annotations 

    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number', 'x'); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    data.addColumn({type: 'string', role: 'annotationText'}); 
    data.addColumn('number', 'Cats'); 
    data.addColumn('number', 'Blanket 1'); 
    data.addColumn('number', 'Blanket 2'); 
    data.addRow([{v: 0, f:"A"}, null, null, 1, 1, 0.5]); 
    data.addRow([{v: 1, f:"B"}, null, null, 2, 0.5, 1]); 
    data.addRow([{v: 2, f:"C"}, null, null, 4, 1, 0.5]); 
    data.addRow([{v: 3, f:"D"}, null, null, 8, 0.5, 1]); 
    data.addRow([{v: 4, f:"E"}, null, null, 7, 1, 0.5]); 
    data.addRow([{v: 5, f:"F"}, null, null, 7, 0.5, 1]); 
    data.addRow([{v: 6, f:"G"}, null, null, 8, 1, 0.5]); 
    data.addRow([{v: 7, f:"H"}, null, null, 4, 0.5, 1]); 
    data.addRow([{v: 8, f:"I"}, null, null, 2, 1, 0.5]); 
    data.addRow([{v: 9, f:"J"}, null, null, 3.5, 0.5, 1]); 
    data.addRow([{v: 10, f:"K"}, null, null, 3, 1, 0.5]); 
    data.addRow([{v: 11, f:"L"}, null, null, 3.5, 0.5, 1]); 
    data.addRow([{v: 12, f:"M"}, null, null, 1, 1, 0.5]); 
    data.addRow([{v: 13, f:"N"}, null, null, 1, 0.5, 1]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, { 
     curveType: 'function', 
     width: 500, 
     hAxis: { 
      ticks: [{v:6, f:"G"}, {v:10, f:"K"}] 
     }, 
     height: 400, 
     vAxis: { 
      maxValue: 10 
     }, 
     annotations: { 
      style: 'line' 
     } 
    }); 
} 

http://jsfiddle.net/Balrog30/W2JWa/3/ - 第三个改变水平轴的连续式轴，这样我可以添加蜱。这只适用于你的X轴本质上是数字或日期/时间的情况。这也会破坏你的轴标签，因为标签与蜱虫有关，但我不确定你想要显示什么，所以它对你来说可能并不重要。