谷歌图表离散轴显示线？

Question

我正在使用具有离散值的谷歌图表，并且似乎无法获取要绘制的vAxis线（以黑色显示）。

它出现在连续值的图形中，但我不希望图表以这种方式分开。

这里是两种类型的图。

http://jsfiddle.net/cFHJY/

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

function drawChart() { 
    var discreteData = new google.visualization.DataTable(); 
    discreteData.addColumn('string', 'Number'); 
    discreteData.addColumn('number', 'Value'); 

    discreteData.addRows([ 
     ['1.492', 10], 
     ['30.701', 17], 
     ['127.469', 6], 
     ['749.382', 11] 
    ]); 

    var discreteChart = new google.visualization.ColumnChart(document.getElementById('discrete_chart_div')); 
    discreteChart.draw(discreteData, { 
     title: 'Discrete Axis Line Chart' 
    }); 

    var continuousData = new google.visualization.DataTable(); 
    continuousData.addColumn('number', 'Number'); 
    continuousData.addColumn('number', 'Value'); 

    continuousData.addRows([ 
     [1.492, 10], 
     [30.701, 17], 
     [127.469, 6], 
     [749.382, 11] 
    ]); 

    var continuousChart = new google.visualization.ColumnChart(document.getElementById('continuous_chart_div')); 
    continuousChart.draw(continuousData, { 
     title: 'Continuous Axis Line Chart' 
    }); 
} 

我该如何要绘制的vAxis线？

Answer 1

“vAxis线”实际上是hAxis基准线，仅适用于连续坐标轴。有一点瑕疵，你可以把你的数据放在一个连续的轴上，同时保持它的离散性。使用DataView将数据转换为“数字”类型（使用行索引作为值，字符串值作为格式化值），并从视图中的值/格式化值对构建hAxis.ticks选项：

function drawChart() { 
    var discreteData = new google.visualization.DataTable(); 
    discreteData.addColumn('string', 'Number'); 
    discreteData.addColumn('number', 'Value'); 

    discreteData.addRows([ 
     ['1.492', 10], 
     ['30.701', 17], 
     ['127.469', 6], 
     ['749.382', 11] 
    ]); 

    var view = new google.visualization.DataView(discreteData); 
    view.setColumns([{ 
     type: 'number', 
     label: discreteData.getColumnLabel(0), 
     calc: function (dt, row) { 
      return {v: row + 1, f: dt.getFormattedValue(row, 0)}; 
     } 
    }, 1]); 

    var ticks = []; 
    for (var i = 0; i < view.getNumberOfRows(); i++) { 
     ticks.push({v: view.getValue(i, 0), f: view.getFormattedValue(i, 0)}); 
    } 

    var range = view.getColumnRange(0); 
    var offset = 0.5; // change this to move the left/right margins of the chart 

    var discreteChart = new google.visualization.ColumnChart(document.getElementById('discrete_chart_div')); 
    discreteChart.draw(view, { 
     title: 'Discrete Axis Line Chart', 
     hAxis: { 
      ticks: ticks, 
      viewWindow: { 
       min: range.min - offset, 
       max: range.max + offset 
      }, 
      // set gridlines.color to "transparent" to hide the vertical gridlines 
      /* 
      gridlines: { 
       color: 'transparent' 
      } 
      */ 
     } 
    }); 
} 
google.load('visualization', '1', {packages:['corechart'], callback: drawChart}); 

例如：http://jsfiddle.net/asgallant/h4Kfd/