如何在iOS中使用谷歌圖形API顯示x軸上的所有值

我需要在x軸上顯示每個日期。使用下面的代碼。單日期也有多個值。如何在iOS中使用谷歌圖形API顯示x軸上的所有值

現在我得到隨機日期顯示在X軸上。但我需要在x軸上顯示每個日期。

[NSString *htmlString = \[NSString stringWithFormat:@"<html>\ 
         <head>\ 
         <script type=\"text/javascript\" src=\"https://www.google.com/jsapi\"></script>\ 
         <script type=\"text/javascript\">\ 
         google.load(\"visualization\", \"1\", {packages:\[\"corechart\"\], 'language': 'en'});\ 
         google.setOnLoadCallback(drawChart);\ 
         function drawChart() {\ 
          var dataTable = new google.visualization.DataTable();\ 
         dataTable.addColumn('datetime', 'Voltage (V)');\ 
         dataTable.addColumn('number', 'Current (mA.)');\ 
         \ 
         dataTable.addRows(\[\ 
         \[new Date(2008, 1, 1), 10\],\ 
         \[new Date(2008, 1, 2), 6\],\ 
         \[new Date(2008, 1, 2), 15\],\ 
         \[new Date(2008, 1, 2), 10\],\ 
         \[new Date(2008, 1, 2), 19\],\ 
         \[new Date(2008, 1, 3), 12\],\ 
         \[new Date(2008, 1, 4), 22\],\ 
         \[new Date(2008, 1, 4), 15\],\ 
         \[new Date(2008, 1, 5), 25\],\ 
         \[new Date(2008, 1, 6), 26\],\ 
         \[new Date(2008, 1, 7), 27\],\ 
         \[new Date(2008, 1, 10), 10\],\ 
         \[new Date(2008, 1, 10), 19\],\ 
         \[new Date(2008, 1, 11), 12\],\ 
         \[new Date(2008, 1, 12), 22\],\ 
         \[new Date(2008, 1, 13), 15\],\ 
         \[new Date(2008, 1, 14), 25\],\ 
         \[new Date(2008, 1, 14), 26\],\ 
         \[new Date(2008, 1, 15), 27\],\ 
         \[new Date(2008, 1, 16), 10\],\ 
         \[new Date(2008, 1, 17), 6\],\ 
         \[new Date(2008, 1, 18), 15\],\ 
         \[new Date(2008, 1, 19), 10\],\ 
         \[new Date(2008, 1, 19), 19\],\ 
         \[new Date(2008, 1, 19), 12\],\ 
         \[new Date(2008, 1, 19), 22\],\ 
         \[new Date(2008, 1, 20), 15\],\ 
         \[new Date(2008, 1, 20), 25\],\ 
         \[new Date(2008, 1, 21), 26\],\ 
         \[new Date(2008, 1, 22), 27\],\ 
         \[new Date(2008, 1, 23), 10\],\ 
         \[new Date(2008, 1, 24), 6\],\ 
         \[new Date(2008, 1, 24), 15\],\ 
         \[new Date(2008, 1, 24), 10\],\ 
         \[new Date(2008, 1, 25), 19\],\ 
         \[new Date(2008, 1, 25), 12\],\ 
         \[new Date(2008, 1, 25), 22\],\ 
         \[new Date(2008, 1, 25), 15\],\ 
         \[new Date(2008, 1, 26), 25\],\ 
         \[new Date(2008, 1, 27), 26\],\ 
         \[new Date(2008, 1, 27), 27\],\ 
         \[new Date(2008, 1, 28), 10\],\ 
         \[new Date(2008, 1, 28), 6\],\ 
         \[new Date(2008, 1, 28), 15\],\ 
         \[new Date(2008, 1, 29), 10\],\ 
         \[new Date(2008, 1, 29), 19\],\ 
         \[new Date(2008, 1, 30), 12\],\ 
         \[new Date(2008, 1, 30), 22\],\ 
         \[new Date(2008, 1, 30), 15\],\ 
         \[new Date(2008, 1, 30), 25\],\ 
         \[new Date(2008, 1, 31), 26\],\ 
         \[new Date(2008, 1, 31), 27\]\ 
         \]);\ 
         \ 
         \ 
          var options = {\ 
         width: 400, height: 240,\ 
         legend: { position: 'bottom', alignment:'start'},\ 
         interpolateNulls:true,\ 
         backgroundColor:'transparent',\ 
         legend: {position: 'none'},\ 
         titleTextStyle:{color: 'black', fontName: 'verdana', fontSize: 8},\ 
         \ 
         hAxis:{format: 'dd-MM', textStyle: {color: '#343434',fontName: 'verdana',fontSize:6},slantedText:'true',slantedTextAngle:1, showTextEvery:1, baselineColor:'transparent',gridlineColor: 'transparent', viewWindowMode:'explicit', viewWindow:{ min: new Date(2008,1,1), max: new Date(2008,1,31) } },\ 
         vAxis: {textStyle: {color: '#343434',fontName: 'verdana',fontSize:6},baselineColor:'transparent',gridlineColor: 'transparent',viewWindowMode:'explicit', viewWindow:{ min: 0 }},\ 
         pointSize:10,\ 
         fontSize: 6,\ 
         lineWidth:3.0,\ 
         tooltip:{textStyle:{color: '#343434', fontName:'verdana',fontSize: 10}, isHtml:'true'},\ 
         series: { \ 
         0:{color: '#d57829', visibleInLegend: true, lineWidth: 1, pointSize: 4},\ 
         1:{color: '#047d94',lineWidth: 0,visibleInLegend: true,pointSize:4},\ 
         2:{color: '#d57829', visibleInLegend: true, lineWidth: 0, pointSize: 6},\ 
         3:{color: '#047d94',lineWidth: 0,visibleInLegend: true,pointSize:6},\ 
         4:{color: '#FFFFFF',visibleInLegend: true, pointSize:0}\ 
         }\ 
         \ 
          };\ 
          \ 
          var chart = new google.visualization.LineChart(document.getElementById('chart_div'));\ 
          chart.draw(dataTable, options);\ 
         }\ 
         </script>\ 
         </head><body style=\"-webkit-tap-highlight-color: rgba(0,0,0,0);\"> \ 
         <div id=\"chart_div\" style=\"width: 2000px; height: 500px;\"></div>\ 
         </body>\ 
         </html>"\]; 

[graphWebView loadHTMLString:htmlString baseURL:nil\];

Above code showing graph as below image.

來源

2014-01-10 Coder_A_D

如果您需要在軸上指定的每個日期，您需要使用hAxis.ticks選項。 ticks取值的陣列，以在軸上的標籤，並且可以是一個值：

hAxis: { 
    ticks: [1, 2, 3, 4] 
}

或對象指定值和標籤的使用方法：

hAxis: { 
    ticks: [{v: 1, f: '1'}, {v: 2, f: 'apple'}, {v: 3, f: '$3'}, {v: 4, f: 'New York'}] 
}

在你的情況下，因爲你要顯示您的數據的所有日期，你可能會想根據數據表的內容來構建ticks陣列：

hAxis: { 
    ticks: dataTable.getDistinctValues(0) 
}

來源

2014-01-10 16:19:42 asgallant

謝謝，它的工作原理。 –

ticks：dataTable.getDistinctValues（0）;在以下代碼中不起作用 –

它不起作用的代碼是什麼？ – asgallant

如何在iOS中使用谷歌圖形API顯示x軸上的所有值

回答

相關問題