Google 차트는 연속적이 아닌 1 씩 증가합니다.

Question

내 웹 사이트에 Google 차트가 있는데, 그것은 꺾은 선형 그래프입니다. 하지만 내 Y 축 데이터 값은 정수만에 갈 것이다, 그래서 당신이 볼 수 있듯이 나는 Y 축에서 "4.5"값을 갖고 싶어하지 않습니다

누군가가 지적 할 수 있다면 내가 그것을 바르게 옳은 방향으로 나!

Answer 1

다음 매개 변수 gridlines:{count}으로 게임해야합니다.

    hAxis: { 
          minValue: 1.00, 
          maxValue: 5.00, 
          baseline: 3.00, 
          viewWindowMode:'explicit', 
          viewWindow: 
          { 
           max: 5.00, 
           min: 1.00 
          }, 
          gridlines:{count:11} 
        }, 
        vAxis: { 
          minValue: 1.00, 
          maxValue:5.00, 
          baseline:3.00, 
          viewWindowMode:'explicit', 
          viewWindow: 
          { 
           max:5.00, 
           min:1.00 
          }, 
          gridlines:{count:11} 
        } 

Answer 2

이 질문에 대한 답변은 이미 here입니다.

그리고 이것은 말씀입니다 :

그냥 정수로 표시에 번호를 원한다면, 쉽게 의 :

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
    ['A', 1,  1,   0.5], 
    ['B', 2,  0.5,   1], 
    ['C', 4,  1,   0.5], 
    ['D', 8,  0.5,   1], 
    ['E', 7,  1,   0.5], 
    ['F', 7,  0.5,   1], 
    ['G', 8,  1,   0.5], 
    ['H', 4,  0.5,   1], 
    ['I', 2,  1,   0.5], 
    ['J', 3.5,  0.5,   1], 
    ['K', 3,  1,   0.5], 
    ['L', 3.5,  0.5,   1], 
    ['M', 1,  1,   0.5], 
    ['N', 1,  0.5,   1] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {curveType: "function", 
        width: 500, height: 400, 
        vAxis: {maxValue: 10, format: '0'}} 
     ); 
} 

당신이 google playground에 가면 당신은주의 할 것이다 축 라벨 은 0, 2.5, 5, 7.5, 10입니다. vAxis에 '0'형식을 추가하면 은 정수 만 표시하므로 내 레이블이 0, 3, 5, 8, 10이됩니다. 숫자가 실제로 7.5 이고 반올림되기 때문에 8 개의 디스플레이가 5와 10 사이의 중간에 인 것으로부터 분명히 이상적이지 않습니다.

축척/레이블을 변경할 수있는 기능이 제한되어 있습니다. 그리고 당신이 무엇을 물어보십시오 적절한 눈금 및 숫자를 깨는 것을 막기 위해 눈금 수를 만들기 위해 자바 스크립트의 특별한 비트가 걸릴 것입니다 펑키 숫자로 내려.

기본적으로 최대 값과 최소값 인 과 눈금 선 수를 사용하면 에 정수만 입력 할 수 있도록 쉽게 나눌 수 있습니다. 그렇게하려면 펑키 한 새로운 로직 인 을 만들어야합니다.

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

// 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; 

// Define the number of gridlines (default 5) 
var gridlines = 5; 

// Determine an appropriate gap between gridlines 
var interval = range/(gridlines - 1); 

// Round that interval up to the exponent of 10 
var newInterval = Math.ceil(interval/roundingDec)*roundingDec; 

// Re-round your max and min to the new interval 
var finalMax = Math.ceil(totalMax/newInterval)*newInterval; 
var finalMin = Math.floor(totalMin/newInterval)*newInterval; 

이 (불행히도) 여기에 몇 가지 문제가 있습니다 : 여기 당신이 적절한 최소/최대 축 값을 얻을 수 있도록 몇 가지 샘플 코드입니다. 첫 번째는 내가 최소/최대 값을 결정하기 위해 눈금 선의 수를 사용한다는 것입니다. 정수를 얼마나 많이 사용해야하는지 알아 내고 싶습니다. 그런 다음

// 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 
    } 
} 

는 위의 변수에 눈금 선 옵션 (vAxis.gridlines)을 설정하고 귀하의 최대 : 이 (의사 코드 만) 다음과 같이 쉬운 방법은 될 것이라고 나는 생각한다,이 작업을 수행하는 newMax 및 minMin을 newMin으로 변경하십시오. 그건 너에게 전체 숫자 축 레이블을 제공해야합니다.

참고 : 숫자가 실제로 작 으면 위의 기능이 작동하지 않을 수 있습니다. 이 기능도 테스트되지 않았으므로 시간에 맞게 예제를 확인하고 제대로 작동하지 않는지 알려주십시오.

1

는 : http://code.google.com/apis/ajax/playground/?type=visualization#line_chart