Интервалы настройки для обеих осей в линейной диаграмме Google

Question

Я использую диаграммы Google Line (Material) и хочу указать оси Y и ось X с интервалами исправления (с шагом 1). Обращаясь к диаграмме, я хочу, чтобы значения Y-Axis составляли 1,2,3. Я не могу определить, какие параметры будут установлены для диаграммы. Цените любую помощь по этому вопросу - Спасибо

Answer 1

Я думаю Материал LineCharts еще не поддерживают тики. Но вы можете попробовать вставить в вариантах - vAxis и попытаться с изменением значения макс:

var options = { 
    vAxis: { 
     viewWindow: { 
       max: 5 
      }, 
    ... 

и называют convertOptions:

chart.draw(data, google.charts.Line.convertOptions(options)); 

и как в this примере на JSFiddle.

Answer 2

Прежде всего, Material Charts еще в бета и материала графики пока не поддерживают многие из опций, поддерживаемых corecharts.

Что касается явной настройки ticks опция, похоже, что это не еще не поддерживается. Если вы хотите, материальный стиль (по крайней мере, шрифты и цвета) с corecharts, вы можете добавить следующее:

option: { theme: 'material' } 

Пример

google.load('visualization', '1.1', {packages: ['corechart']}); 
 
    google.setOnLoadCallback(drawChart); 
 

 
    function drawChart() { 
 

 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('number', 'Day'); 
 
     data.addColumn('number', 'Guardians of the Galaxy'); 
 

 
     data.addRows([ 
 
     [1, 7.8], 
 
     [2, 3.9], 
 
     [3, 2.4], 
 
     [4, 1.7], 
 
     [5, 1.9], 
 
     [6, 8.8], 
 
     [7, 7.6], 
 
     [8, 2.3], 
 
     [9, 6.9], 
 
     [10, 2.8], 
 
     [11, 5.3], 
 
     [12, 6.6], 
 
     [13, 4.8], 
 
     [14, 4.2] 
 
     ]); 
 

 
     var options = { 
 
     title: 'Box Office Earnings in First Two Weeks of Opening', 
 
     width: 900, 
 
     height: 500, 
 
     vAxis: { 
 
       viewWindow: { 
 
        min: 0, 
 
        max: 10 
 
       }, 
 
       ticks: [0,1,2,3,4,5,6,7,8,9,10] 
 
     }, 
 
     hAxis: { 
 
       viewWindow: { 
 
        min: 1, 
 
        max: 14 
 
       }, 
 
       ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14] 
 
     }, 
 
     theme: 'material' 
 
     }; 
 

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

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="linechart_material"></div>