Question

使用以下Sammy JS视图，AmCharts和JSON，我尝试将多个图表加载到＆＃34;见解＆＃34;视图：

this.get('#/insights', function (context) {
        context.$element().html("<div id='chartdiv'></div>");
        var chart = AmCharts.makeChart("chartdiv", {
            "type": "pie",
            "theme": "none",
            "titles": [{
                "text": "Header Text",
                "size": 16
            }],
            "dataProvider": [{
                "product": "Product 1",
                "value": 23
            }, {
                "product": "Product 2",
                "value": 56
            }, {
                "product": "Product 3",
                "value": 21
            }],
            "titleField": "product",
            "valueField": "value",
            "labelRadius": 5,
            "startEffect": "bounce",
            "startDuration": 2,
            "labelRadius": 15,
            "radius": "22%",
            "innerRadius": "60%",
            "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>"
            //"labelText": "[[title]]"
        });
    });

我尝试添加另一个div：

context.$element().html("<div id='chartdiv'></div><div id='chartdiv2'></div>");

与相关的amcharts数据：

var chart = AmCharts.makeChart("chartdiv2", {
            "type": "pie",
            "theme": "none",
            "titles": [{
                "text": "Header Text",
                "size": 16
            }],
            "dataProvider": [{
                "product": "Product 1",
                "value": 23
            }, {
                "product": "Product 2",
                "value": 56
            }, {
                "product": "Product 3",
                "value": 21
            }],
            "titleField": "product",
            "valueField": "value",
            "labelRadius": 5,
            "startEffect": "bounce",
            "startDuration": 2,
            "labelRadius": 15,
            "radius": "22%",
            "innerRadius": "60%",
            "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>"
            //"labelText": "[[title]]"
        });
    });

我似乎无法显示第二张图。

Answer 1

我用这种方式使用了多个饼图，你可以参考下面的代码： -

/* 
   This code block i have used in php for dynamic data, you can ignore this block.
   This is just to give you an idea about i am using data to populate the chart.
*/

$return['chartdata'] = $dataset;
$return['titlefield'] = $_POST['display_field'];
$return['valuefield'][] = 'count';
$return['valuefield'][] = 'value';
echo json_encode($return);
/*
   Ends Here.
*/

/* Below code is what will help you. */
for (var i = 0; i < result.valuefield.length; i++) {
            $('#charts_div').append("<div class='col-md-6'><div id='chartdiv"+(i+1)+"' style='width: 640px; height: 400px;'></div></div>");
            var chart = new AmCharts.AmPieChart();
            chart.pathToImages = gbl_js+"amcharts/images/";
            chart.dataProvider = result.chartdata;
            chart.titleField = result.titlefield;
            chart.valueField = result.valuefield[i];                
            chart.legend = {
                            "markerType": "circle",
                            "position": "bottom",
                            "marginRight": 80,      
                            "autoMargins": false,
                            "valueText": ""
                        };
            chart.exportConfig = {
                "menuTop": 0,
                "menuItems": [{
                    "icon": gbl_js+'amcharts/images/export.png',
                    "items": [{
                        "title": 'JPG',
                        "format": 'jpg'
                    }, {
                        "title": 'PNG',
                        "format": 'png'
                    }, {
                        "title": 'SVG',
                        "format": 'svg'
                    }, {
                        "title": 'PDF',
                        "format": 'pdf'
                    }]
                }
            };

            chart.write('chartdiv'+(i+1));
        };

在单个sammy js视图中使用多个amcharts

1 个答案: