web-dev-qa-db-ja.com

Google Visualization Line Chartの軸に一致するパーセンテージを表示するようにツールチップを設定するにはどうすればよいですか？

次のコードを使用して、パーセンテージを表示するようにツールチップを設定できます。

 var formatter = new google.visualization.NumberFormat（{
 fractionDigits：2、
接尾辞： '％' 
}）; 
 formatter。 format（data、1）; //フォーマッタを最初の列に適用します。

NumberFormatで各要素に100を掛ける方法はありますか？それ以外の場合、ツールチップは.50％と表示されます。

私は使っている vAxis.format = "format:'#%' " 100を掛けます。したがって、.5は縦軸に50％として表示されます。

ドキュメント（ icu-project.org/apiref ）によると、これは％を一重引用符で囲むことで上書きできますが、これは機能しませんでした。

最終的な結果として、ツールチップが軸と一致しません。これを行うための最良の方法は何ですか？

google-visualizationnumber-formattinglinechart
16
B Seven
var formatter = new google.visualization.NumberFormat({ 
  pattern: '#%', 
  fractionDigits: 2
});

おかげで http://groups.google.com/group/google-visualization-api/

7
B Seven

私はあなたがするのとまったく同じようにフォーマッターを指定することによってこれを機能させました：

var chartData = google.visualization.arrayToDataTable(tableData);
var formatter = new google.visualization.NumberFormat({
    fractionDigits: 2,
    suffix: '%'
});
formatter.format(chartData, 1);

最後の呼び出しの1は、float値を持つ2番目の列を意味します。

次に、チャートオプションで軸の形式を指定し、ドキュメントや他の人がここで指摘しているようにパーセント記号をエスケープします。

var chartOptions = {
    vAxis: { format: '#\'%\'' }
};

次に、グラフを描画します。

var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(chartData, chartOptions);

これにより、左側の軸が10%、20%などの値でレンダリングされます。また、ツールチップはデフォルトのツールチップと同じように見えますが、パーセンテージは10.10%、20.20%などです。

左側の軸にも2桁の小数桁が必要な場合は、代わりにチャートオプションのフォーマットとしてこれを使用します。

vAxis: { format: '#.00\'%\'' }
22
Markus Amalthea Magnuson

パーセント（％）記号自体を一重引用符で囲む必要があります。

これを行うために使用した行は次のようになります：options['vAxis'] = {'format': "#,###'%'"};

これを上記のフォーマッタと組み合わせると、縦軸にパーセント記号を付けたり、ツールチップにパーセント記号を含めたりすることができます。

3
Xentac

わかりました...これは少し遅いです。私は7年前にこれを必要としなかったことを認めます。それにもかかわらず、これは私のために働いた。

var rows = data.getNumberOfRows();

for (var i = 0; i < rows; i++) {
    data.setFormattedValue(i, 4, (data.getFormattedValue(i, 4)*100).toFixed(1) + "%"); //LY
    data.setFormattedValue(i, 3, (data.getFormattedValue(i, 3)*100).toFixed(1) + "%"); //TY
}

私の場合、4つの列を使用しており、そのうちの2つはパーセンテージで右軸に割り当てられています。これらの列のツールチップに、小数表現ではなく適切なパーセンテージを反映させたいと思いました。

Googleドキュメントへのリンクは次のとおりです。

https://developers.google.com/chart/interactive/docs/reference#DataTable_setFormattedValue

これがランダムな見知らぬ人がそれを探すのに役立つことを願っています。 ;）

2
Danimal Reks