Google圖表-hAxis上的數字/字符串問題（jQuery ajax JSON數據）

Question

我想做的事

我正在嘗試使用Google Charts在“組合圖”中顯示來自MySQL數據庫的數據。 為了做到這一點，我按照本教程進行了一些更改，並提出了代碼，如本文最后一章所示。

實際行為

數據正確顯示。 但是，我確實必須告訴Google圖表，“年”是一個使它進入連續“模式”的數字。 這會導致hAxis上的年份以小數位顯示，尤其是如果我沒有所有連續年份的數據時。 （即2,010.5）

期望的行為

我希望Google圖表將年份顯示為字符串，並以離散的“模式”進行操作。

我認為問題是

我認為我遇到的問題主要是由於年份（將在hAxis上顯示）在數據庫中是int（11），並且控制器提供的json也以年份作為數。 為了在下面闡明json的外觀示例：

[
    {
        "year_data": 2010,
        "data_1": 125895,
        "data_2": 25158.5
    }
]

當我將控制器用於其他功能時，最好不要對其進行任何更改。

我試圖解決的問題

• 我嘗試了僅更改data.addColumn('number', 'year_data');的大膽舉措data.addColumn('number', 'year_data'); 到data.addColumn('string', 'year_data'); 。 它沒有用，並且出現“類型不匹配”。
• 我試圖提出一種解決方法，主要涉及hAxis.showTextEvery:和某種行數。 它沒有用，但這很可能是由於我缺乏經驗/知識。

一句話中的問題

如何在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>

Answer 1

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]
    ]);
});