amchart генерирует круговую диаграмму, нужно установить разные цвета и метки внутри срезов - PullRequest
Новая
       6

amchart генерирует круговую диаграмму, нужно установить разные цвета и метки внутри срезов

0 голосов
/ 13 сентября 2018

Я использую amcharts для создания круговой диаграммы с меткой внутри. Я перепробовал много попыток, но это не получилось. Вот моя скрипка 

 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 голосов
/ 13 сентября 2018

Вы можете установить массив 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>
0 голосов
/ 13 сентября 2018

, чтобы изменить цвета среза, используйте опцию 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>
...