在google圖表中顯示月份hAxis

我們正試圖在谷歌圖表中顯示水平線和垂直線。爲此，我們需要使用hAxis和vAxis屬性。在google圖表中顯示月份hAxis

但是hAxis.format沒有月份的任何格式，那麼我們如何顯示垂直線呢？

var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Sales', ], 
    ['Jan', 1000], 
    ['Feb', 1170], 
    ['Mar', 660], 
    ['Apr', 1030] 
]); 

var options = { 
    title: '', 
    hAxis: { 
     title: 'Year', 
     minValue: 0, 
     titleTextStyle: { 
      color: '#333' 
     }, 
     gridlines: { 
      color: '#f3f3f3', 
      count: 5 
     }, 
     format: 'MMM' 
    }, 
    vAxis: { 
     minValue: 0, 
     gridlines: { 
      color: '#f3f3f3', 
      count: 5 
     } 
    } 
};

JsFiddle

這裏是今年的jsfiddle它顯示兩條線（水平和垂直）

Working Fiddle

來源

2016-01-08 Renu Thakur

你能解釋一下多一點，你真的想在Y軸 –

展示我要顯示在圖表的x軸個月時，與圖表單元，你可以見http://jsfiddle.net/asgallant/j29Pt/3/ –

是存在的，但它不是那麼簡單。
您應該知道的第一件事是有沒有選項爲string類型的主要列創建垂直線。因此，我們需要使用例如number的列類型，並稍後修復標籤。

爲了做到這一點，我們定義的數據表是這樣的：

var data = new google.visualization.DataTable(); 
     data.addColumn('number', 'Month'); 
     data.addColumn('number', 'Sales'); 
     data.addRows([ 
     [{v: 0, f:'Jan'}, 1000], 
     [{v: 1, f:'Feb'}, 1170], 
     [{v: 2, f:'Mar'}, 660], 
     [{v: 3, f:'Apr'}, 1030] 
    ]);

當我們設置數值也串標記爲Month軸。
隨着這一點和format屬性被刪除，我們會得到垂直線，但數字而不是x軸標籤的字符串，這不是我們想要的。
要解決這個問題，我們可以設置hAxisticks來強制繪圖中的正確標籤。

var options = { 
     title: '', 
     hAxis: { 
      title: 'Month', 
      titleTextStyle: { 
       color: '#333' 
      }, 
      baseline: 0, 
      gridlines: { 
       color: '#f3f3f3', 
       count: 4 
      }, 
      ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'}], // <------- This does the trick 
     }, 
     vAxis: { 
      minValue: 0, 
      gridlines: { 
       color: '#f3f3f3', 
       count: 5 
      } 
     } 
    };

特此完整的工作小提琴：http://jsfiddle.net/j29Pt/417/

來源

2016-01-08 09:30:32

謝謝，這是真棒.... –

你可以請檢查這個問題太http://stackoverflow.com/questions/34674928/fill-one-color在谷歌圖 –

我做:)高興的答案幫助。 –

在google圖表中顯示月份hAxis

回答

相關問題