如何获取折线图中的所有json值

我有很多 Json 值，我将使用它们创建一个折线图，但它在图表中只显示一个值。我是 javascript 的新手，有一个想法在图表中绘制所有值。请任何人给出这个问题的 jsfiddle 示例。

HTML代码

<div id="chartContainer" class="chart">

Script

$.getJSON('dashboard_summary.php?', function(data) {
    var len = data.length

    $.each(data, function(i, v) {               
        chart(v.Date,v.Tip,v.Revenue,len);
    });
});

function chart (dates,Tip,Rev,len) {    
    var chart = new CanvasJS.Chart("chartContainer", {
        title: {
            text: "Revenue",
            fontSize: 15
        },
        axisX: {
            gridColor: "Silver",
            tickColor: "silver",
            valueFormatString: "DD/MMM"
        },                        
        toolTip: {
            shared:true
        },
        theme: "theme2",
        axisY: {
            gridColor: "Silver",
            tickColor: "silver"
        },
        legend: {
            verticalAlign: "center",
            horizontalAlign: "right"
        },
        data: [
            {                   
                type: "line",
                showInLegend: true,
                lineThickness: 2,
                name: "Tip",
                markerType: "square",
                color: "#F08080",
                dataPoints: [
                    {
                        x: new Date(dates),
                        y: parseInt(Tip)
                    }
                ]
            },
            {        
                type: "line",
                showInLegend: true,
                name: "Revenue",
                color: "#20B2AA",
                lineThickness: 2,
                dataPoints: [
                    {
                        x: new Date(dates),
                        y: parseInt(Rev)
                    }
                ]
            }
        ],
        legend: {
            cursor: "pointer",
            itemclick: function(e) {
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
        }
    });

    chart.render();
};

Json数据

{
    "Date": "2014-01-30",
    "CarsParked": "1",
    "RevenueWithTip": "0",
    "Revenue": "0",
    "Tip": "0",
},
{
    "Date": "2014-01-31",
    "CarsParked": "10",
    "RevenueWithTip": "10",
    "Revenue": "7",
    "Tip": "3",
},
{
    "Date": "2014-02-28",
    "CarsParked": "28",
    "RevenueWithTip": "55",
    "Revenue": "47",
    "Tip": "8",
}

根据您的代码，我可以明白为什么图表只显示一个点，这是预期在图表上显示的那些点的最后一个数据点。问题是这样的：

var len = data.length;

/* Loop through each item in the data */
$.each(data, function(i, v) {               
    chart(v.Date,v.Tip,v.Revenue,len); /* Draw a chart with one point */
});

因此，您最终会绘制许多图表，其中最后一个图表具有最后一个数据点来替换所有先前的图表。

相反，您应该调整foreach如下所示，将数据转换为点数组后绘制图表。

$.getJSON('dashboard_summary.php?', function(data) {
    var Tips = [];
    var Revs = [];
    $.each(data, function(i, v) {               
        Tips.push({ x: new Date(v.Date), y: parseInt(v.Tip) });
        Revs.push({ x: new Date(v.Date), y: parseInt(v.Revenue) });
    });
    chart(Tips, Revs);
});

另外，您可以格式化x轴，使图表看起来更漂亮（这里的x轴格式是为上面给出的数据设计的。在您的应用程序中，您可能需要根据实际数据使用其他格式样式） :

function chart (Tips, Revs) { 
    var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Revenue",
        fontSize: 15
    },
    axisX: {
        gridColor: "Silver",
        tickColor: "silver",
        valueFormatString: "DD/MMM",
        interval:14,
        intervalType: "day"
    },                        
    toolTip: {
        shared:true
    },
    theme: "theme2",
    axisY: {
        gridColor: "Silver",
        tickColor: "silver"
    },
    legend: {
        verticalAlign: "center",
        horizontalAlign: "right"
    },
    data: [
        {                   
            type: "line",
            showInLegend: true,
            lineThickness: 2,
            name: "Tip",
            markerType: "square",
            color: "#F08080",
            dataPoints: Tips
        },
        {        
            type: "line",
            showInLegend: true,
            name: "Revenue",
            color: "#20B2AA",
            lineThickness: 2,
            dataPoints: Revs
        }
    ],
    legend: {
        cursor: "pointer",
        itemclick: function(e) {
            if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                e.dataSeries.visible = false;
            } else {
                e.dataSeries.visible = true;
            }
            chart.render();
        }
    }
});

chart.render();
}

A jsFiddle http://jsfiddle.net/maE9z/1/被制作here http://jsfiddle.net/maE9z/1/供您审阅。