如何使amcharts的图形部分动态化

时间:2015-09-14 14:24:56

标签: javascript jquery asp.net json amcharts

我正在从数据库字段创建amcharts。这是我的代码

function Categoriesline(data) {

                                                debugger;
                                                var databind = JSON.parse(data);
                                                var chart = AmCharts.makeChart("chartdiv2", {
                                                    "theme": "light",
                                                    "type": "serial",
                                                    "legend": {
                                                    "position": "right",
                                                    "fontSize": 9
                                                     },                                                    
                                                    "marginRight": 80,
                                                    "autoMarginOffset": 20,
                                                    "marginTop": 20,
                                                    "dataProvider": databind,
                                                    "valueAxes": [{
                                                        "id": "v1",
                                                        "axisAlpha": 0.1
}],
                                                        "graphs": [{                                                            
                                                            "balloonText": "[[category]]<br><b>value: [[value]]</b>",
                                                            "bullet": "round",
                                                            "bulletBorderAlpha": 1,                                                            
                                                            "hideBulletsCount": 50,
                                                            "lineThickness": 2,
                                                            "title": "section1",
                                                            "valueField": "section1"
                                                        }, {
                                                            "balloonText": "[[category]]<br><b>value: [[value]]</b>",
                                                            "bullet": "round",
                                                            "bulletBorderAlpha": 1,                                                            
                                                            "hideBulletsCount": 50,
                                                            "lineThickness": 2,
                                                            "title": "section2",
                                                            "valueField": "section2"
                                                        }, {
                                                            "balloonText": "[[category]]<br><b>value: [[value]]</b>",
                                                            "bullet": "round",
                                                            "bulletBorderAlpha": 1,
                                                            "hideBulletsCount": 50,
                                                            "lineThickness": 2,
                                                            "title": "section3",
                                                            "valueField": "section3"
}],


                                                            "categoryField": "categorydescription",
                                                            "categoryAxis": {                                                                
                                                                "axisAlpha": 0,
                                                                "minHorizontalGap": 60
                                                            },
                                                            "export": {
                                                                "enabled": true
                                                            }
                                                        });


                                                    }

数据库中的所有必需数据我正在获取JSON格式。

我想从json本身指定值轴。在上面的代码而不是硬编码“section1”,“section2”,“section3”我想从具有json键名称部分的databind对象中分配它。

我该怎么做?

我需要添加类似

的内容
var graph = [];
                var v;
                for (var j = 0; j < 6; j++) {
                    graph[j] = new AmCharts.AmGraph();
                    graph[j].valueAxis =databind['section'] ; // we have to indicate which value axis should be used
                    graph[j].title = "Value" + j;
                    v = j.toString();
                    graph[j].valueField = databind['value'];
                    graph[j].bullet = "round";                    
                    chart.addGraph(graph[j]);
                }

Json格式 enter image description here

enter image description here

在上面的pic foreach部分,我需要绘制不同的线条(多线图)。

[
    {
"Section": "Section1",
        "duration": "1MCount",
        "value": 15},

    {
"Section": "Section2",
        "duration": "1MCount",
        "value": 20},

    {
"Section": "Section1",
        "duration": "3MCount",
        "value": 10},

    {
"Section": "Section2",
        "duration": "3MCount",
        "value": 7},

    {
"Section": "Section3",
        "duration": "3MCount",
        "value": 12}
]

我添加了json的详细信息。

0 个答案:

没有答案