Javascript 如何在canvas js中循环以生成多系列图表？_Javascript_Jquery_Json_Ajax_Charts

Javascript 如何在canvas js中循环以生成多系列图表？

javascript jquery json ajax charts

Javascript 如何在canvas js中循环以生成多系列图表？,javascript,jquery,json,ajax,charts,Javascript,Jquery,Json,Ajax,Charts,我正在尝试使用Canvasjs制作一个多系列图表。我的问题是，我无法在数据点内进行循环，所以我硬编码了所有内容。有没有一种方法可以使用户进行循环 <script type='text/javascript'> $(document).ready(function () { $.getJSON('data.php', function (result) { var chart1 = new CanvasJS.Chart('Container', { title:{

我正在尝试使用Canvasjs制作一个多系列图表。我的问题是，我无法在数据点内进行循环，所以我硬编码了所有内容。有没有一种方法可以使用户进行循环

<script type='text/javascript'>
 $(document).ready(function () {

$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [

    {
        type: 'column',

        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }

    ]




});

chart1.render();

});


});

 </script>
 </head>
 <body>

 <div id="Container" style="width: 800px; height: 380px;"></div>

 </body>
 </html>

以下是Json数据：

<script type='text/javascript'>
 $(document).ready(function () {

$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [

    {
        type: 'column',

        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }

    ]




});

chart1.render();

});


});

 </script>
 </head>
 <body>

 <div id="Container" style="width: 800px; height: 380px;"></div>

 </body>
 </html>

{name:“Grace”，“label:“A”，“y”：0}，{name:“Grace”，“label:“B”，“y”：3}，{name:“Grace”，“label:“C”，“y”：0}，{name:“Grace”，“label:“D”，“y”：0}，label:“Mirriam”，“label:“A”，“y”：0}，{name:“B”，“y”：5}，{name:“Mirriam”，“label:“C”，“y”：2}，{”name:“Mirriam”，“label:“D”，“y”：0}，{，“标签”：“B”，“y”：5}，{“姓名”：“Mar”，“标签”：“C”，“y”：2}，{“姓名”：“Mar”，“标签”：“D”，“y”：0}，{“姓名”：“Jejomar”，“标签”：“A”，“y”：0}，{“姓名”：“Jejomar”，“标签”：“B”，“y”：5}，{“姓名”：“Jejomar”，“标签”：“C”，“y”：2}，{“姓名”：“Jejomar”，“标签”：“Jejomar”，“标签”：“D”，“y”：0}]

<script type='text/javascript'>
 $(document).ready(function () {

$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [

    {
        type: 'column',

        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }

    ]




});

chart1.render();

});


});

 </script>
 </head>
 <body>

 <div id="Container" style="width: 800px; height: 380px;"></div>

 </body>
 </html>

这是我的密码：

<script type='text/javascript'>
 $(document).ready(function () {

$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [

    {
        type: 'column',

        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }

    ]




});

chart1.render();

});


});

 </script>
 </head>
 <body>

 <div id="Container" style="width: 800px; height: 380px;"></div>

 </body>
 </html>


$（文档）.ready（函数（）{
$.getJSON（'data.php'，函数（结果）{
var chart1=new CanvasJS.Chart（'容器'{
标题：{
正文：“调查结果”，
},
数据：[
{
键入：“列”，
数据点：[
{标签：“A”，y:result[0].y}，
{label:“B”，y:result[1].y}，
{label:“C”，y:result[2].y}，
{label:“D”，y:result[3].y}，
]
},{
键入：“列”，
数据点：[
{label:“A”，y:result[4].y}，
{label:“B”，y:result[5].y}，
{label:“C”，y:result[6].y}，
{label:“D”，y:result[7].y}，
]
},{
键入：“列”，
数据点：[
{label:“A”，y:result[8].y}，
{label:“B”，y:result[9].y}，
{label:“C”，y:result[10].y}，
{label:“D”，y:result[11].y}，
]
},{
键入：“列”，
数据点：[
{label:“A”，y:result[12].y}，
{label:“B”，y:result[13].y}，
{label:“C”，y:result[14].y}，
{label:“D”，y:result[15].y}，
]
}
]
});
图1.render（）；
});
});

这应该可以：

<script type='text/javascript'>
 $(document).ready(function () {

$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [

    {
        type: 'column',

        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }

    ]




});

chart1.render();

});


});

 </script>
 </head>
 <body>

 <div id="Container" style="width: 800px; height: 380px;"></div>

 </body>
 </html>

var persons = {}
json.forEach(d => {
  if (!(d.name in persons)) persons[d.name] = []
  persons[d.name].push({label: d.label, y: d.y})
})

var data = Object.keys(persons).map(name => {
  return {type: 'column', dataPoints: persons[name]}
})

首先，我们获取所有数据点并按名称对其进行分组。然后，我们通过映射人名来构建最终的数据数组。

这应该可以：

<script type='text/javascript'>
 $(document).ready(function () {

$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [

    {
        type: 'column',

        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }

    ]




});

chart1.render();

});


});

 </script>
 </head>
 <body>

 <div id="Container" style="width: 800px; height: 380px;"></div>

 </body>
 </html>

var persons = {}
json.forEach(d => {
  if (!(d.name in persons)) persons[d.name] = []
  persons[d.name].push({label: d.label, y: d.y})
})

var data = Object.keys(persons).map(name => {
  return {type: 'column', dataPoints: persons[name]}
})

首先，我们获取所有数据点并按名称对它们进行分组，然后通过映射人名来构造最终的数据数组

<script type='text/javascript'>
 $(document).ready(function () {

$.getJSON('data.php', function (result) {
    var chart1 = new CanvasJS.Chart('Container', {
    title:{
        text: 'Results of Survey',
    },
    data: [

    {
        type: 'column',

        dataPoints: [
        { label:"A", y: result[0].y},
        { label:"B", y: result[1].y},
        { label:"C", y: result[2].y},
        { label:"D", y: result[3].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[4].y},
        { label:"B", y: result[5].y},
        { label:"C", y: result[6].y},
        { label:"D", y: result[7].y},
        ]

    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[8].y},
        { label:"B", y: result[9].y},
        { label:"C", y: result[10].y},
        { label:"D", y: result[11].y},
        ]
    },{
        type: 'column',
        dataPoints: [
        { label:"A", y: result[12].y},
        { label:"B", y: result[13].y},
        { label:"C", y: result[14].y},
        { label:"D", y: result[15].y},
        ]
    }

    ]




});

chart1.render();

});


});

 </script>
 </head>
 <body>

 <div id="Container" style="width: 800px; height: 380px;"></div>

 </body>
 </html>