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

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

HTML代码

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

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",
}

---

更新代码。它可以工作>>

资料=[
{
“日期”：“2014-01-30”，
“1”，
“RevenueWithTip”：“0”，
“收入”：“0”，
“提示”：“0”，
},
{
“日期”：“2014-01-31”，
“10”，
“收入提示”：“10”，
“收入”：“7”，
“提示”：“3”，
},
{
“日期”：“2014-02-28”，
“28”，
“收入提示”：“55”，
“收入”：“47”，
“提示”：“8”，
}];
var len=data.length；
$.each（数据、函数（i、v）{
图表（v.日期、v.小费、v.收入、len）；
});
功能图（日期、提示、版本、长度）{
var chart=new CanvasJS.chart（“chartContainer”{
标题：{
正文：“收入”，
尺寸：15
},
axisX：{
网格颜色：“银色”，
颜色：“银色”，
valueFormatString：“DD/MMM”
},                        
工具提示：{
分享：真的
},
主题：“主题2”，
axisY：{
网格颜色：“银色”，
颜色：“银色”
},
图例：{
垂直排列：“中心”，
水平对齐：“右”
},
数据：[
{                   
键入：“行”，
showInLegend：是的，
线宽：2，
名称：“小费”，
markerType:“方形”，
颜色：“F08080”，
数据点：[
{
x：新日期，
y:parseInt（提示）
}
]
},
{        
键入：“行”，
showInLegend：是的，
名称：“收入”，
颜色：“20B2AA”，
线宽：2，
数据点：[
{
x：新日期，
y:parseInt（修订版）
}
]
}
],
图例：{
光标：“指针”，
项目点击：功能（e）{
if（typeof（e.dataSeries.visible）==“undefined”| | e.dataSeries.visible）{
e、 dataSeries.visible=false；
}否则{
e、 dataSeries.visible=true；
}
chart.render（）；
}
}
});
chart.render（）；
}

---

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

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轴格式是针对上述数据设计的。在您的应用程序中，您可能需要根据实际数据使用另一种格式样式）：

---

A是为您的复习而做的。

现在图表中也没有变化。它仍然只显示最后的数据值。我想我们使用数组。我试图将数据值存储在数组中，但它没有响应。请更新代码。非常感谢@vbn。。。。它的工作。。。我还有一个疑问，我怎么能在X轴上显示所有ma日期值……你是说你希望数据点的日期在X轴上？据我所知，没有一种方法可以完美地做到这一点，因为轴上的刻度数是基于间隔和开始/结束日期的。如果将间隔设置为1，则所有日期都将显示在轴中，并且它们彼此重叠。

  Update Code: 




dataRevenue=
       [
        { x: new Date(2014, 00,30), y: 0 },
        { x: new Date(2014, 01,31), y: 7},
        { x: new Date(2014, 02,28), y: 47}

        ];

dataTip =[
        { x: new Date(2014, 00,30), y: 0 },
        { x: new Date(2014, 01,31), y: 3},
        { x: new Date(2014, 02,28), y: 8}

        ]; 

    var chart = new CanvasJS.Chart("chartContainer",
    {
      theme: "theme2",
      title:{
        text: "line chart"
      },
      axisX: {
        valueFormatString: "MMM",
        interval:1,
        intervalType: "month"

      },
      axisY:{
        includeZero: false

      },
      data: [
      {        
        type: "line",
        //lineThickness: 3,        
        dataPoints: dataTip
      },
       {        
        type: "line",
        //lineThickness: 3,        
        dataPoints: dataRevenue
      }



      ]
    });

chart.render();

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 */
});

$.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);
});

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