3

軸の 1 つがおかしくなり、数字を繰り返し始めたとき (つまり、1、2、3、4 ではなく 1、1、2、2)、コンボ (縦棒グラフ/折れ線グラフ) グラフの Google ビジュアライゼーションのバグ修正に取り組んでいました。下の画像をご覧ください

重複した軸
（出典：rackcdn.com）

グラフ オプションの設定は次のとおりです。

// Instantiate and draw our chart, passing in some options. 
var frequency_by_day_options = {
    vAxes: [
        {format:'#,###', title:"Call Volume"}, 
        {format: '#%', title:'Missed Call Rate',
          viewWindow:{
            max:1,
          }}
        ],      
    legend: {position: 'none'},
    chartArea: { height:'60%', width:'60%'},
    width: 800,
    height: 350,
    backgroundColor: 'transparent',
    bar: { groupWidth: '90%'},
    isStacked: true,
    seriesType: 'bars',
    series: {0: {type:'bar', targetAxisIndex:0}, 1: {type:'line', targetAxisIndex:1},},
    colors: ['blue', 'green'],
    animation:{
        duration: 1000,
        easing: 'out',},
    };

ここで何が起こっているのかわかりません。すべての vAxis オプションをコメントアウトしても、この動作は引き続き観察されます。私が間違っていることについてのアイデアはありますか？これは私を夢中にさせています:)

4

2 に答える 2

3

左側の vAxis は4 ではなく、実際には 2 であると推測します。5 つのラベルは0、0.5、1、1.5、2です。

フォーマットを「#,###」に設定しているため、小数は表示されません。「#,###.#」に変更すると、0、0.5、1、1.5、2 と表示されます。

それを解決する方法はたくさんありますが、最も簡単な方法は、次のような JavaScript 関数を使用して、軸の値が整数値のみであることを確認することです。

// Take the Max/Min of all data values in all graphs
var totalMax = 3;
var totalMin = -1;

// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));

// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);

// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;

// Determine the range of your values
var range = newMax - newMin;

// Calculate the best factor for number of gridlines (2-5 gridlines)
// If the range of numbers divided by 2 or 5 is a whole number, use it
for (var i = 2; i <= 5; ++i) {
    if ( Math.round(range/i) = range/i) {
        var gridlines = i
    }
}
于 2013-03-28T04:58:30.697 に答える