Wie Wert von Array Zingchart.js setzen

ich gestapeltes Balkendiagramm in Zingchart.js erstellen möchten, und ich habe Daten wie:Wie Wert von Array Zingchart.js setzen

var data = [{ 
    month : 1, 
    name : 'Alex', 
count : '20' 
}, 
{ 
month : 2, 
    name : 'Alex', 
count : '20' 
} , 
{ 
month : 2, 
    name : 'John', 
count : '30' 
} , 
{ 
month : 2, 
    name : 'Jane', 
count : '25' 
} , 
{ 
month : 3, 
    name : 'Alex', 
count : '15' 
} , 
{ 
month : 3, 
    name : 'John', 
count : '25' 
} , 
{ 
month : 3, 
    name : 'Jane', 
count : '23' 
} 
}]

und ich gewandelten Daten als:

var data = { "Alex" : ["20", " 20", "15"], 
       "John" : ["0", "30", "25" ], 
       "Jane" : ["0", "25", "23"] 
      }

ich möchte Wert Zingchart.js in Array setzen für gestapeltes Balkendiagramm erstellen und Beispielwert in zingchart zu setzen:

var myConfig = { 
 
    type: "bar", 
 
    plot:{ 
 
    stacked:true, 
 
    stackType:"normal" 
 
    }, 
 
    "scale-x": { 
 
      "labels": ["1","2","3"], 
 
      "label":{"offsetY": 5, 
 
        "text": "Month", 
 
        "fontColor": "#777", 
 
        "fontSize": 14 
 
    } 
 
    }, 
 
    series:[ 
 
    { 
 
     values: [20, 20, 15] 
 
    }, 
 
    { 
 
     values:[0, 30, 25 ] 
 
    }, 
 
    { 
 
     values: [0, 25, 23] 
 
    } 
 
    ] 
 
}; 
 
    
 
zingchart.render({ 
 
\t id : 'myChart', 
 
\t data : myConfig, 
 
\t height: "100%", 
 
\t width: "100%" 
 
});

html, body, #myChart { 
 
    width:100%; 
 
    height:100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script> 
 
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
\t \t ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9","ee6b7db5b51705a13dc2339db3edaf6d"];</script></head> 
 
\t <body> 
 
\t \t <div id='myChart'></div> 
 
\t </body> 
 
</html>

Wie Wert in Array zu zingchart.js setzen, die irgendwelche Ideen für mich haben? Vielen Dank. https://www.zingchart.com/docs/chart-types/bar-charts/#bar__props_stacked

Quelle

2017-09-02 jane

Sie können etwas tun:

var xLabels = Object.keys(data) 

var yValues = xLabels.map(function (key) { 
    return { 
    values: data[key].map(Number) 
    } 
})

Schauen Sie sich diese Demo:

var data = { 
 
    "Alex": ["20", " 20", "15"], 
 
    "John": ["0", "30", "25"], 
 
    "Jane": ["0", "25", "23"] 
 
} 
 

 
var xLabels = Object.keys(data) 
 

 
var series = xLabels.map(function (key) { 
 
    return { 
 
    values: data[key].map(Number) 
 
    } 
 
}) 
 

 
var myConfig = { 
 
    type: "bar", 
 
    plot: { 
 
    stacked: true, 
 
    stackType: "normal" 
 
    }, 
 
    "scale-x": { 
 
    "labels": xLabels, 
 
    "label": { 
 
     "offsetY": 5, 
 
     "text": "Month", 
 
     "fontColor": "#777", 
 
     "fontSize": 14 
 
    } 
 
    }, 
 
    series: series 
 
}; 
 

 
zingchart.render({ 
 
    id: 'myChart', 
 
    data: myConfig, 
 
    height: "100%", 
 
    width: "100%" 
 
});

html, 
 
body, 
 
#myChart { 
 
    width: 100%; 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script> 
 
    <script> 
 
    zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/"; 
 
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"]; 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div id='myChart'></div> 
 
</body> 
 

 
</html>

Quelle

2017-09-02 08:40:22 dfsq

Dank für Ihre Antwort !! – jane

sorry, So fügen Sie Daten aus '[{Werte: [20, 20, 15]}, {Werte: [0, 30, 25]}]' auf '[{Werte: [20, 20, 15], Text : "Alex"}, {Werte: [0, 30, 25], Text: "John"}] ' – jane

dies versuchen:' xLabels.map (function (key) {return {Werte: data [key] .map (Nummer), Text: Taste}}) ' – dfsq

Wie Wert von Array Zingchart.js setzen

Antwort

Verwandte Themen