google.chartsのLineChart、ロケールを変更せずに軸上で数値形式を選択

ユーザーが言語と数値の形式を互いに独立して選択できるウェブアプリケーションをプログラミングして、google.chartsのLineChartを使用したい1つの軸に日付を、もう1つの軸に数値を表示するグラフを表示します。今では、言語を "en"に設定し、haxisのフォーマットを英語の形式で表示するように設定できます（11月12日）。しかし、どのように使用するためにvaxis上の数字をフォーマットするのですか？ 1,000のセパレータ、すなわち1000を「1,000」ではなく「1.000」と表示していますか？（フォーマッタはツールチップにのみ影響するように見えます）。google.chartsのLineChart、ロケールを変更せずに軸上で数値形式を選択

コンプリート例：

<html> 
 
    <head> 
 
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
     <script type="text/javascript"> 
 
      google.charts.load('current', {'packages':['corechart'], language: 'en'}); 
 
      google.charts.setOnLoadCallback(drawChart); 
 
      function drawChart() { 
 
      var data = google.visualization.arrayToDataTable([ 
 
       ['Date', 'Numeric data'], 
 
       [new Date(2012, 10, 12), 1000], 
 
       [new Date(2012, 10, 13), 1200], 
 
       [new Date(2012, 10, 14), 1100], 
 
       [new Date(2012, 10, 15), 1300] 
 
      ]); 
 
      var options = { 
 
       hAxis: { 
 
        format: "MMM dd" 
 
       }, 
 
       vAxis: { 
 
       } 
 
      }; 
 
      var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }); 
 
      formatter.format(data, 1); // Apply formatter to second column 
 
      var chart = new google.visualization.LineChart(document.getElementById('mychart')); 
 
      chart.draw(data, options); 
 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div id="mychart" style="width: 900px; height: 500px"></div> 
 
    </body> 
 
    </html>

出典

2016-10-13 Jesper Mygind

カスタム書式設定vaxisを提供することができますフォーマットされた値

を提供するために、

使用目的の表記を表示する目盛の配列を作成

にラベルを付けます

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

- または -

var vTicks = []; 
for (var i = 0; i < data.getNumberOfRows(); i++) { 
    vTicks.push({ 
    v: data.getValue(i, 1), 
    f: formatter.formatValue(data.getValue(i, 1)) 
    }); 
}

作業スニペット以下を参照してください...

google.charts.load('current', {'packages':['corechart'], language: 'en'}); 
 
google.charts.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Numeric data'], 
 
    [new Date(2012, 10, 12), 1000], 
 
    [new Date(2012, 10, 13), 1200], 
 
    [new Date(2012, 10, 14), 1100], 
 
    [new Date(2012, 10, 15), 1300] 
 
    ]); 
 

 
    var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }); 
 
    formatter.format(data, 1); 
 

 
    // build custom ticks, use object notation to for formatted values 
 
    var vTicks = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
    vTicks.push({ 
 
     v: data.getValue(i, 1), 
 
     f: data.getFormattedValue(i, 1), 
 
    }); 
 
    } 
 

 
    var options = { 
 
    hAxis: { 
 
     format: "MMM dd" 
 
    }, 
 
    vAxis: { 
 
     ticks: vTicks 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('mychart')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="mychart"></div>

EDIT

ではなく、データから正確な値を使用します、
それは、あなた自身を提供するために、DataTableには、minとmax

のプロパティを持つオブジェクトを返しますgetColumnRangeための方法は、構築するためにそれらの値を使用してい

値の範囲に基づいて
を意味することがありticks、次の作業のスニペットを参照してください...

google.charts.load('current', {'packages':['corechart'], language: 'en'}); 
 
google.charts.setOnLoadCallback(drawChart); 
 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Date', 'Numeric data'], 
 
    [new Date(2012, 10, 12), 1050], 
 
    [new Date(2012, 10, 13), 1250], 
 
    [new Date(2012, 10, 14), 1150], 
 
    [new Date(2012, 10, 15), 1350] 
 
    ]); 
 

 
    var formatter = new google.visualization.NumberFormat({ decimalSymbol: ',', groupingSymbol: '.' }); 
 
    formatter.format(data, 1); 
 

 
    // get range for y axis 
 
    var colRange = data.getColumnRange(1); 
 
    var tickMin = Math.floor(colRange.min/100)*100; // round down to nearest 100 
 
    var tickMax = Math.ceil(colRange.max/100)*100; // round up to nearest 100 
 

 
    // build custom ticks 
 
    var vTicks = []; 
 
    for (var i = tickMin; i <= tickMax + 100; i=i+100) { 
 
    vTicks.push({ 
 
     v: i, 
 
     f: formatter.formatValue(i), 
 
    }); 
 
    } 
 

 
    var options = { 
 
    hAxis: { 
 
     format: "MMM dd" 
 
    }, 
 
    vAxis: { 
 
     ticks: vTicks 
 
    } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('mychart')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="mychart"></div>

出典

2016-10-13 19:00:10 WhiteHat

ありがとう、何よりも私はこれまでに思いつきました。しかし、私の問題は、vAxisに表示される番号の制御権を引き継ぐことです。違いは、データを変更することによって見ることができる。 1200を1250に置き換えます。次に、私のコードはvAxisに1000 1100 1200 1300が表示され、コードは1000 1100 1250 1300に変わります。適切な数値を見つけるためにLineChartに残す方法はありますか？同じ時間が彼らのフォーマットの支配を引き継ぐのか？ –

はい、フォーマット文字列を使うのが最も簡単ですが、ピリオドをグループ化シンボルとして使うことはできません - __EDIT__を参照してください - 'getColumnRange'を使って' ticks'を作成するのではなく実際のデータ値 – WhiteHat

はい、どの値の範囲を期待していますか（値が7〜8の場合はあまりうまくいきません）。 Googleはおそらく、実際のデータに基づいて適切なティックを選択する方が優れているので、アルゴリズムを維持できることを望んでいました。この場合、私は2つの可能性を持っていると思います。自分のコードをコールバック関数で拡張して、私が望むようにチックをフォーマットしたり、コードからチックアルゴリズムを探し出し、それを適用して、あなたが行ったようにカスタムのフォーマットされたティックを構築することができます。 –

google.chartsのLineChart、ロケールを変更せずに軸上で数値形式を選択

答えて

関連する問題