首页 > 解决方案 > 如何在 amCharts 中显示饼图

问题描述

我想用amcharts做馅饼。它不显示图表。

这是我的饼图脚本的代码:

<script>

          var chart1;

        var chartData1 = [



        ];


        AmCharts.ready(function () {
            // SERIAL CHART
            chart1 = new AmCharts.AmSerialChart();
            chart1.dataProvider = chartData1;
            chart1.categoryField = "Division";
            chart1.startDuration = 1;
            chart1.depth3D = 50;
             chart1.angle = 45;
            chart1.marginRight = 80;
    chart1.plotAreaBorderColor = "#DADADA";
           // chart3.plotAreaBorderColor = "#DADADA";
            chart1.plotAreaBorderAlpha = 0;
    //chart8.responsive.enabled = true;
            // this single line makes the chart a bar chart
            //chart3.rotate = true;


            // AXES
            // Category
            var categoryAxis = chart1.categoryAxis;
            categoryAxis.gridPosition = "start";
            categoryAxis.labelRotation = 45; // this line makes category values to be rotated
            categoryAxis.gridAlpha = 0;
            categoryAxis.axisAlpha = 0;
    categoryAxis.color =  'red';

            // Value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisAlpha = 0;
            valueAxis.gridAlpha = 0.5;
            tickLength: 0;
    // valueAxis.minimum = 0;
    // valueAxis.maximum = 3.5;
            valueAxis.position = "bottom";
    valueAxis.color =  '';
            chart1.addValueAxis(valueAxis);

            // GRAPHS



            var graph8 = new AmCharts.AmGraph();
            graph8.type = "pie";
            graph8.title = "Actual";
            graph8.valueField = "Actual";
            graph8.balloonText = "Actual:[[value]]";
            graph8.lineAlpha = 0;
            graph8.fillColors = ["#ee8989"]; 
            graph8.fillAlphas = 1;
    graph8.labelText =  '[[value]]';
    graph8.labelRotation = 360;
    graph8.labelPosition = 'top-bottom'; // change to inside
    graph8.marginRight = 10;
    graph8.color =  '#000';
    graph8.labelColorField =  '#FFFFFF';
            chart1.addGraph(graph8);



           var legend = new AmCharts.AmLegend();
                            legend = new AmCharts.AmLegend();
                            legend.position = "bottom";
                            legend.align = "center";
                            legend.markerType = "circle";
                            // legend.labelText = '[[title]]';
            chart1.addLegend(legend);

            chart1.creditsPosition = "top-right";
            // WRITE
            chart1.write("piechart");
        });
    </script>

这是div:

   <div class="row" style="margin-top: 55px;">
  <div class="col-md-12">
      <div id="piechart" style="height:450px; width:1300px;"></div>
  </div>
</div>

这是我附上的柱形图正在显示但未显示的屏幕截图3d pieChart。柱形图运行完美。

在此处输入图像描述

但是当我制作饼图时,它显示如下:

在此处输入图像描述

请帮助我摆脱这个问题。谢谢

标签: javascriptpie-chartamcharts

解决方案


推荐阅读