amchart生成饼图，需要在切片内设置不同的颜色和标签

Question

我正在使用amcharts，用于生成带有标签的饼图。我尝试了很多尝试，但没有成功。这是我的fiddle

 AmCharts.makeChart("chart4", {
           "type": "pie",
           "theme": "light",
           "labelRadius": -35,
           "labelText": "[[percents]]%",           
           "dataProvider": [ {
             "country": "Used Space",           
             "fillColor":"#0000ff",
             "litres": 84
           },
           {
           "country": "Free Space",        
            "color":"#33cc33",
             "litres": 16
             }],
           "valueField": "litres",
           "titleField": "country",
           "outlineAlpha": 0.4,
           "depth3D": 12,
           "outerRadius":35,
           "angle": 40,
           "labelsEnabled": false,
           "autoMargins": false,
  "marginTop": 0,
  "marginBottom": 0,
  "marginLeft": 8,
  "marginRight": 8,
  "pullOutRadius": 0,

            "balloon":{
            "fixedPosition":true
           },
           "export": {
             "enabled": true,
            menu:[]
           }
         } );



         // generate some random data, quite different range
         function generateChartData() {
             var chartData = [];

            chartData = [{"date" : "09/11/2018 0:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 1:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 2:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 3:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 4:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 5:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 6:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 7:00", "diskSpaceUsage" : "84"},{"date" : "09/11/2018 8:00", "diskSpaceUsage" : "83.75"},
            {"date" : "09/11/2018 9:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 10:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 11:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 12:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 13:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 14:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 15:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 16:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 17:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 18:00", "diskSpaceUsage" : "83"},
            {"date" : "09/11/2018 19:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 20:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 21:00", "diskSpaceUsage" : "83"},{"date" : "09/11/2018 22:00", "diskSpaceUsage" : "83.5"},{"date" : "09/11/2018 23:00", "diskSpaceUsage" : "84"},
            {"date" : "09/12/2018 0:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 1:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 2:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 3:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 4:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 5:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 6:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 7:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 8:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 9:00", "diskSpaceUsage" : "84"},{"date" : "09/12/2018 10:00", "diskSpaceUsage" : "84"}];


             return chartData;
         }

我需要为两个部分设置颜色，标签应该显示在切片内部。任何建议都将受到高度赞赏！

Answer 1

您可以像提到的@WhiteHat一样设置colors数组，或者如果要为特定切片指定颜色，例如您的代码似乎尝试执行的操作，请使用colorField并使字段名称与数据中的属性匹配。如果要更改标签颜色，还可以设置labelColorField：

AmCharts.makeChart("chartdiv", {
  // ...
  colorField: "color", //property containing your color in your data
  labelColorField: "labelColor",
  dataProvider: [{
    "country": "Used Space",            
    "color": "#0000ff", //color pulled from here
    "labelColor": "#efefef",
    "litres": 84
  },
    {
    "country": "Free Space",        
    "color": "#33cc33",   
    "labelColor": "#efefef",
    "litres": 16
  }],
  // ...
});

就像@WhiteHat所说，你需要通过将labelsEnabled设置为true来启用标签。您还需要进一步调整labelRadius并使用更大的负值，以便在需要时将其进一步移动到内部。

AmCharts.makeChart("chartdiv", {
  // ...
  labelsEnabled: true,
  labelRadius: -150,
  // ...
});

演示：

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "colorField": "color",
  "labelColorField": "labelColor",
  "labelRadius": -150,
  "labelsEnabled": true,
  "labelText": "[[percents]]%",
  "dataProvider": [{
      "country": "Used Space",
      "color": "#0000ff", //color pulled from here
      "labelColor": "#efefef",
      "litres": 84
    },
    {
      "country": "Free Space",
      "color": "#33cc33",
      "labelColor": "#efefef",
      "litres": 16
    }
  ],
  "valueField": "litres",
  "titleField": "country",
  "outlineAlpha": 0.4,
  "depth3D": 12,
  "outerRadius": 35,
  "angle": 40,
  "autoMargins": false,
  "marginTop": 0,
  "marginBottom": 0,
  "marginLeft": 8,
  "marginRight": 8,
  "pullOutRadius": 0,

  "balloon": {
    "fixedPosition": true
  },
  "export": {
    "enabled": true,
    menu: []
  }
});

#chartdiv {
  width: 100%;
  height: 500px;
}

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Answer 2

要更改切片颜色，请使用选项colors

"colors": ['red', 'green'],

要显示切片标签，请将选项labelsEnabled设置为true

"labelsEnabled": true,

请参阅以下工作代码段...

AmCharts.makeChart("chartdiv", {
  "type": "pie",
  "theme": "light",
  "colors": ['red', 'green'],
  "labelRadius": -35,
  "labelText": "[[percents]]%",		   
  "dataProvider": [ {
    "country": "Used Space",			
    "litres": 84
  },
	{
  	"country": "Free Space",		   
    "litres": 16
  }],
  "valueField": "litres",
  "titleField": "country",
  "outlineAlpha": 0.4,
  "depth3D": 12,
  "outerRadius":35,
  "angle": 40,
  "labelsEnabled": true,
  "autoMargins": false,
  "marginTop": 0,
  "marginBottom": 0,
  "marginLeft": 8,
  "marginRight": 8,
  "pullOutRadius": 0,

  "balloon":{
    "fixedPosition":true
  },
  "export": {
    "enabled": true,
    menu:[]
  }
} );

#chartdiv {
  width: 100%;
  height: 500px;
}											

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/pie.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>