2016-02-01 2 views
0

Я создаю линейный граф с использованием javascript, но я не могу отображать даты по оси Y ... Он может отображать только цифры. Может ли кто-нибудь взглянуть на мои коды и рассказать мне, как это исправить?Проблемы с созданием линейного графика

google.charts.load('current', {packages: ['corechart', 'line']}); 
 
google.charts.setOnLoadCallback(drawBackgroundColor); 
 

 
function drawBackgroundColor() { 
 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('number', 'X'); 
 
     data.addColumn('number', 'Daily Data Usage'); 
 

 
     data.addRows([ 
 
     [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], 
 
     [6, 11], 
 
     ]); 
 

 
     var options = { 
 
     hAxis: { 
 
      title: 'Date' 
 
     }, 
 
     vAxis: { 
 
      title: 'Total Data Usage (GB)' 
 
     }, 
 
     backgroundColor: '#f1f8e9' 
 
     }; 
 

 
     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
     chart.draw(data, options); 
 
    }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <div id="chart_div"></div> 
 
    

ответ

1

google.charts.load('current', {packages: ['corechart', 'line']}); 
 
google.charts.setOnLoadCallback(drawBackgroundColor); 
 

 
function drawBackgroundColor() { 
 
     var data = new google.visualization.DataTable(); 
 
     data.addColumn('string', 'X'); 
 
     data.addColumn('number', 'Daily Data Usage'); 
 

 
     data.addRows([ 
 
     ["Jan 1st, 2016", 0], ["Jan 2nd, 2016", 10], ["Jan 3rd, 2016", 23], ["Jan 4th, 2016", 17], ["Jan 5th, 2016", 18], ["Jan 6th, 2016", 9], 
 
     ["Jan 7th, 2016", 11], 
 
     ]); 
 

 
     var options = { 
 
     hAxis: { 
 
      title: 'Date' 
 
     }, 
 
     vAxis: { 
 
      title: 'Total Data Usage (GB)' 
 
     }, 
 
     backgroundColor: '#f1f8e9' 
 
     }; 
 

 
     var chart = new google.visualization.LineChart(document.getElementById('chart_div')); 
 
     chart.draw(data, options); 
 
    }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
    <div id="chart_div"></div> 
 
    

То, что вы должны были исправить изменял первого типа в строку вместо номера.

+0

Спасибо вам большое! Если бы я хотел показать дни недели, как понедельник, вторник и т. Д., Что мне изменить, чтобы это отобразилось? –

+0

@RichardSiaw, вам не нужно ничего менять, чтобы заставить его работать, кроме дат, которые я вводил. Строки позволяют вам вставлять любой текст, который вы хотите. – Aetricity

+0

Я вижу хорошо! Большое вам спасибо за помощь :) –

Смежные вопросы