谷歌圖表離散軸顯示線？

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/