格式谷歌路線圖提示數據使用百分比

Question

我有數據從測試JSON文件來折線圖，像這樣：

{ 
    "cols": [ 
     {"id":"Day","label":"Day","type":"number"}, 
     {"id":"Failed","label":"Checks Failed","type":"number"}, 
     {"id":"Passed","label":"Checks Passed","type":"number"}, 
     ], 
    "rows": [ 
     {"c":[{"v":"1","f":null},{"v": "25","f":null},{"v": "72","f":null}]}, 
     {"c":[{"v":"2","f":null},{"v": "6","f":null},{"v": "67","f":null}]}, 
     {"c":[{"v":"3","f":null},{"v": "6","f":null},{"v": "32","f":null}]}, 
     {"c":[{"v":"4","f":null},{"v": "6","f":null},{"v": "7","f":null}]}, 
     {"c":[{"v":"5","f":null},{"v": "6","f":null},{"v": "57","f":null}]}, 
     ] 
} 

我有我的圖表腳本：

var graph_1 = $.ajax({ 
    url: "/linegraph.json", 
    dataType: "json", 
    async: false 
}).responseText; 

var data = new google.visualization.DataTable(graph_1); 

var linechart_1 = new google.charts.Line(document.getElementById('lg1')); 

var lg1_options = { 
    legend: {position: 'none'}, 
    height: 100, 
    vAxis: {format: '#%'} 
}; 

linechart_1.draw(data, lg1_options); 

格式選項似乎沒有給我其他人建議的結果。我的工具提示只顯示一個普通數字，而我希望看到數字後跟%。我哪裏錯了？

Answer 1

材料圖表處於測試階段。外觀和交互性在很大程度上是最終的，但選項聲明的方式不是。如果要將經典折線圖轉換爲物料折線圖，則需要替換此行：

chart.draw（data，options）;

...這一點：

chart.draw（數據，google.charts.Line.convertOptions（選項））;

Docs

所以你要在這個替換代碼：

linechart_1.draw(data, google.charts.Line.convertOptions(lg1_options)); 

注意，#%格式化迫使它來解釋你的價值觀爲百分比，即。 5 == 500%，不5%，所以你可能想使用format:'#\'%\''

JSFiddle