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

时间：2018-09-13 13:43:37

标签： javascript charts amcharts

我正在使用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;
         }

我需要设置两个部分的颜色，并且标签应显示在切片内。任何建议将不胜感激！

2 个答案:

答案 0 :(得分：1)

要更改切片颜色，请使用选项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>

答案 1 :(得分：1)

您可以设置colors数组（如提到的@WhiteHat），或者如果您想为特定切片指定颜色，例如代码似乎正在尝试的颜色，请使用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>

相关问题
最新问题