4

我创建了一个折线图，它使用 php 和 json 加载数据。

问题是图表将 NULL 值绘制为 0，看起来非常难看。

我最好的猜测是我以错误的方式创建 json，而我真正想要的输出是 {"v":} 而不是 {"v":""}。

现在的折线图： 在此处输入图像描述

我想要的是： 在此处输入图像描述

php代码

   $reports['cols'][] = array(label => "Time", type => "string");
        $reports['cols'][] = array(label => "Today", type => "number");
        $reports['cols'][] = array(label => "Yesterday", type => "number");
        $reports['cols'][] = array(label => "Budget", type => "number");

            //Some mysql code that populates values ($today, $yesterday, $budget)

        $rows = array();
        for($i=10; $i <= 21; $i++){

            $temp = array();
            $temp[] = array('v' => (int) $i);
                    //Format string will return "" and not "0" if value is blank
            $temp[] = array('v' => (string) $today["$i"]);
            $temp[] = array('v' => (string) $yesterday["$i"]);
            $temp[] = array('v' => (string) $budget);
            $rows[]['c'] = $temp;
        }

        $reports['rows'] = $rows;
        $string=json_encode($reports);
        echo $string;

php的输出：

{
    "cols":[
        {"label":"Time","type":"string"},
        {"label":"Today","type":"number"},
        {"label":"Yesterday","type":"number"},
        {"label":"Budget","type":"number"}
    ],

    "rows":[
        {"c":[{"v":10},{"v":"0"},{"v":"0"},{"v":"90000"}]},
        {"c":[{"v":11},{"v":"22491"},{"v":"7420"},{"v":"90000"}]},
        {"c":[{"v":12},{"v":""},{"v":"50082"},{"v":"90000"}]},
        {"c":[{"v":13},{"v":""},{"v":"91660"},{"v":"90000"}]},
        {"c":[{"v":14},{"v":""},{"v":"109204"},{"v":"90000"}]},
        {"c":[{"v":15},{"v":""},{"v":"115280"},{"v":"90000"}]},
        {"c":[{"v":16},{"v":""},{"v":"111853"},{"v":"90000"}]},
        {"c":[{"v":17},{"v":""},{"v":"87368"},{"v":"90000"}]},
        {"c":[{"v":18},{"v":""},{"v":"33063"},{"v":"90000"}]},
        {"c":[{"v":19},{"v":""},{"v":"14903"},{"v":"90000"}]},
        {"c":[{"v":20},{"v":""},{"v":"1441"},{"v":"90000"}]},
        {"c":[{"v":21},{"v":""},{"v":"0"},{"v":"90000"}]}
    ]
}

Javascript

google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {

    var jsonData = $.ajax({
        url: "functions/load.php?q=salesChart",
        dataType:"json",
        async: false
    }).responseText;

    // Create our data table out of JSON data loaded from server.
    var data = new google.visualization.DataTable(jsonData);

    var options = {
        title: 'Money / Hour',
        colors: ['#4BA15A', '#45559D', 'red'],
        legend: {position: 'top'},
        lineWidth: 2,
        pointSize: 3,
        fontName: 'Helvetica',
        fontSize: 10,
        interpolateNulls: false,
        backgroundColor: {strokeWidth: 1},
        chartArea: {left: 70, top: 60, width: "85%", height: "70%"} 
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
4

1 回答 1

5

我用 {"v":null} 替换了 {"v":""} 并且知道它看起来非常好！

jsonData=jsonData.replace(/\"\"/g, 'null');

结果是一个没有绘制 0 的图表 在此处输入图像描述

于 2013-09-02T12:06:31.740 回答