[英]Google Charts - number/string issue on hAxis (Jquery ajax JSON data)
I am trying to show data from a MySQL database in a "ComboChart" using Google Charts. 我正在尝试使用Google Charts在“组合图”中显示来自MySQL数据库的数据。 In order to do that I followed this tutorial, made some alterations and came up with the code as shown on the very bottom of this post.
为了做到这一点,我按照本教程进行了一些更改,并提出了代码,如本文最后一章所示。
The data displays correctly. 数据正确显示。 I do have to tell Google Charts however that the "year" is a number what throws it into continuous "mode".
但是,我确实必须告诉Google图表,“年”是一个使它进入连续“模式”的数字。 That leads to the year on the hAxis displaying with decimal places, in particular if I don't have data for all consecutive years.
这会导致hAxis上的年份以小数位显示,尤其是如果我没有所有连续年份的数据时。 (ie 2,010.5)
(即2,010.5)
I want Google Charts to display the year as if it was a string and operate in discrete "mode". 我希望Google图表将年份显示为字符串,并以离散的“模式”进行操作。
I think the problem, I am encountering is mostly due to the fact that the year (to be shown on the hAxis) is a int(11) in the database and that the json that is provided by a controller also has the year as a number. 我认为我遇到的问题主要是由于年份(将在hAxis上显示)在数据库中是int(11),并且控制器提供的json也以年份作为数。 To clarify below an example of what the json could look like:
为了在下面阐明json的外观示例:
[
{
"year_data": 2010,
"data_1": 125895,
"data_2": 25158.5
}
]
As I use the controller for a bunch of other stuff, I would preferably not make any alterations to it. 当我将控制器用于其他功能时,最好不要对其进行任何更改。
data.addColumn('number', 'year_data');
data.addColumn('number', 'year_data');
的大胆举措data.addColumn('number', 'year_data');
to data.addColumn('string', 'year_data');
data.addColumn('string', 'year_data');
. hAxis.showTextEvery:
and some sort of row count. hAxis.showTextEvery:
和某种行数。 It didn't work but that might very well be due to my lack of experience/knowledge. How can I turn the year data into a string in JavaScript or having Google Charts behave as if it was a string? 如何在JavaScript中将年份数据转换为字符串,或者如何使Google Charts像字符串一样运行?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script src="/googlecharts/ajaxGetPost.js" type="text/javascript"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
function charts(data, ChartType) {
var jsonData = data;
google.load("visualization", "1", {
packages: ["corechart"],
callback: drawVisualization
});
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'year_data');
data.addColumn('number', 'Data 1');
data.addColumn('number', 'Data 2');
$.each(jsonData, function(i, jsonData) {
var year = jsonData.year_data;
var data1 = jsonData.data_1;
var data2 = jsonData.data_2;
data.addRows([
[year, data1, data2]
]);
});
var options = {
colorAxis: {
colors: ['#54C492', '#cc0000']
},
datalessRegionColor: '#dedede',
defaultColor: '#dedede',
legend: {
position: 'bottom',
alignment: 'start'
},
seriesType: 'bars',
series: {
1: {
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
$(document).ready(function() {
url = '/data/get';
ajax_data('GET', url, function(data) {
charts(data)
});
});
</script>
toString
should work just fine, see following snippet... toString
应该可以正常工作,请参见以下代码段...
var data = new google.visualization.DataTable();
data.addColumn('string', 'year_data');
data.addColumn('number', 'Data 1');
data.addColumn('number', 'Data 2');
$.each(jsonData, function(i, jsonData) {
var year = jsonData.year_data.toString();
var data1 = jsonData.data_1;
var data2 = jsonData.data_2;
data.addRows([
[year, data1, data2]
]);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.