Question

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

HTML代码

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

脚本

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

Answer 1

更新了代码。它工作＆gt;＆gt; Pastebin

<!DOCTYPE HTML>
<html>

<head>  
<script type="text/javascript" src = "http://canvasjs.com/wp-content/themes/bootstrap_child/assets/js/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

</head>
<body>
<div id="chartContainer" class="chart">
<script type="text/javascript">

 data=[
{
    "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;

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


}
</script>
</body>

</html>

Answer 2

jsFiddle

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

Answer 3

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

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

jsFiddle here供您查看。

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

3 个答案: