I need to show every date on x-axis. Using following code. also there is multiple values for single date.
我需要在x轴上显示每个日期。使用以下代码。单个日期也有多个值。
Right now I am getting random date is displaying on x axis. but i need to show every date on x-axis.
现在我得到随机日期显示在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\];
1 个解决方案
#1
7
If you need every date specified on the axis, you need to use the hAxis.ticks option. ticks takes an array of values to label on the axis, and can either be a value:
如果需要轴上指定的每个日期,则需要使用hAxis.ticks选项。 ticks在轴上标记值的数组,并且可以是值:
hAxis: {
ticks: [1, 2, 3, 4]
}
or an object specifying the value and label to use:
或指定要使用的值和标签的对象:
hAxis: {
ticks: [{v: 1, f: '1'}, {v: 2, f: 'apple'}, {v: 3, f: '$3'}, {v: 4, f: 'New York'}]
}
In your case, since you want to display all dates from your data, you will probably want to build the ticks array based on the DataTable contents:
在您的情况下,由于您希望显示数据中的所有日期,您可能希望根据DataTable内容构建ticks数组:
hAxis: {
ticks: dataTable.getDistinctValues(0)
}
#1
7
If you need every date specified on the axis, you need to use the hAxis.ticks option. ticks takes an array of values to label on the axis, and can either be a value:
如果需要轴上指定的每个日期,则需要使用hAxis.ticks选项。 ticks在轴上标记值的数组,并且可以是值:
hAxis: {
ticks: [1, 2, 3, 4]
}
or an object specifying the value and label to use:
或指定要使用的值和标签的对象:
hAxis: {
ticks: [{v: 1, f: '1'}, {v: 2, f: 'apple'}, {v: 3, f: '$3'}, {v: 4, f: 'New York'}]
}
In your case, since you want to display all dates from your data, you will probably want to build the ticks array based on the DataTable contents:
在您的情况下,由于您希望显示数据中的所有日期,您可能希望根据DataTable内容构建ticks数组:
hAxis: {
ticks: dataTable.getDistinctValues(0)
}