Установить размер шрифта на отдельных ярлыках в anychart

Question

У меня есть круговая диаграмма, которую я создаю с помощью anychart.

Этикетки с круговой диаграммой используют правильное семейство шрифтов и цвет, но я хочу установить различные размеры шрифта для каждой части. Я хочу, чтобы размер шрифта был больше на самом большом фрагменте.

Вот мой Fiddle

Вот мой Javascript

<script type="text/javascript"> 
    var chart; 
    var labels; 
    anychart.onDocumentReady(function() { 
     //dataset 
     var data = anychart.data.set([ 
      { name: "$0-$50,000", value: 68, labelText: "68%", toolTip: "68%", title: "$0-$50,000" }, 
      { name: "$50,000-$100,000", value: 13, labelText: "13%", toolTip: "13%", title: "$50,000-$100,000" }, 
      { name: "$100,000-$150,000", value: 6, labelText: "6%", toolTip: "6%", title: "$100,000-$150,000" }, 
      { name: "$150,000-$250,000", value: 6, labelText: "6%", toolTip: "6%", title: "$150,000-$250,000" }, 
      { name: "$250,000 - plus", value: 7, labelText: "7%", toolTip: "7%", title: "$250,000 - plus" } 
    ]) 

     //set chart variable 
     chart = anychart.pie(data); 

     //Set labels to pull from data 
     labels = chart.labels(); 
     labels.textFormatter('{%labelText}'); 

     //Format tooltip content and styles 
     var tooltip = chart.tooltip(); 
     tooltip.textFormatter('{%toolTip}'); 
     tooltip.titleFormatter('{%title}'); 
     tooltip.separator(true); 
     tooltip.fontFamily('PT Sans'); 
     tooltip.fontSize(18); 
     tooltip.title().fontFamily('PT Sans'); 
     tooltip.title().fontSize(18); 
     tooltip.title().align('center'); 



     //adjust legend 
     var legend = chart.legend(); 
     legend.enabled(true); 
     legend.position("left"); 
     legend.align("center"); 
     legend.itemsLayout("vertical"); 
     legend.fontFamily('PT Sans'); 

     //adjust font 
     var labels = chart.labels(); 
     labels.fontColor('white'); 
     labels.fontFamily('PT Sans'); 
     labels.fontSize(36); 

     //create title 
     var title = chart.title(); 
     title.text("68% of Rollovers Involve Less Than $50,000"); 
     title.enabled(true); 
     title.fontColor('Red'); 
     title.fontSize('48'); 
     title.fontFamily('PT Sans'); 
     title.fontWeight('700'); 

     //inner radius makes this a doughnut chart instead of pie 
     chart.innerRadius("30%"); 

     //define the container 
     chart.container("Container"); 

     chart.animation(true); 

     //set delay to recall draw ch art to 
     chart.draw(); 



    }); 
</script> 

А вот фотография, которую я создал в фотошопе, чтобы показать, что я пытаюсь достичь

Answer 1

Самый простой способ сделать это - поместить объект метки прямо в данные:

anychart.onDocumentReady(function() { 
 
    //dataset 
 
    var data = anychart.data.set([{ 
 
    name: "$0-$50,000", 
 
    value: 68, 
 
    labelText: "68%", 
 
    toolTip: "68%", 
 
    title: "$0-$50,000", 
 
    label: { 
 
     fontColor: "Blue", 
 
     fontSize: 20 
 
    } 
 
    }, { 
 
    name: "$50,000-$100,000", 
 
    value: 13, 
 
    labelText: "13%", 
 
    toolTip: "13%", 
 
    title: "$50,000-$100,000", 
 
    label: { 
 
     fontColor: "Blue", 
 
     fontSize: 10 
 
    } 
 
    }, { 
 
    name: "$100,000-$150,000", 
 
    value: 6, 
 
    labelText: "6%", 
 
    toolTip: "6%", 
 
    title: "$100,000-$150,000", 
 
    label: { 
 
     fontColor: "Blue", 
 
     fontSize: 9 
 
    } 
 
    }, { 
 
    name: "$150,000-$250,000", 
 
    value: 6, 
 
    labelText: "6%", 
 
    toolTip: "6%", 
 
    title: "$150,000-$250,000", 
 
    abel: { 
 
     fontColor: "Green", 
 
     fontSize: 8 
 
    } 
 
    }, { 
 
    name: "$250,000 - plus", 
 
    value: 7, 
 
    labelText: "7%", 
 
    toolTip: "7%", 
 
    title: "$250,000 - plus", 
 
    label: { 
 
     fontColor: "Red", 
 
     fontSize: 7 
 
    } 
 
    }]); 
 

 
    //set chart variable 
 
    chart = anychart.pie(data); 
 

 
    chart.overlapMode(true); 
 
    //Set labels to pull from data 
 
    labels = chart.labels(); 
 
    labels.textFormatter('{%labelText}'); 
 

 
    //Format tooltip content and styles 
 
    var tooltip = chart.tooltip(); 
 
    tooltip.textFormatter('{%toolTip}'); 
 
    tooltip.titleFormatter('{%title}'); 
 
    tooltip.separator(true); 
 
    tooltip.fontFamily('PT Sans'); 
 
    tooltip.fontSize(18); 
 
    tooltip.title().fontFamily('PT Sans'); 
 
    tooltip.title().fontSize(18); 
 
    tooltip.title().align('center'); 
 

 

 

 
    //adjust legend 
 
    var legend = chart.legend(); 
 
    legend.enabled(true); 
 
    legend.position("left"); 
 
    legend.align("center"); 
 
    legend.itemsLayout("vertical"); 
 
    legend.fontFamily('PT Sans'); 
 

 
    //adjust font 
 
    //var labels = chart.labels(); 
 
    labels.fontColor('white'); 
 
    labels.fontFamily('PT Sans'); 
 

 
    //create title 
 
    var title = chart.title(); 
 
    title.text("68% of Rollovers Involve Less Than $50,000"); 
 
    title.enabled(true); 
 
    title.fontColor('Red'); 
 
    title.fontSize('48'); 
 
    title.fontFamily('PT Sans'); 
 
    title.fontWeight('700'); 
 

 
    //inner radius makes this a doughnut chart instead of pie 
 
    //chart.innerRadius("30%"); 
 

 
    //define the container 
 
    chart.container("container"); 
 

 
    chart.animation(true); 
 

 
    //set delay to recall draw ch art to 
 
    chart.draw(); 
 

 
});

<script src="https://cdn.anychart.com/js/7.12.0/anychart-bundle.min.js"></script> 
 
<div id="container"></div>

объект Этикетка выглядит следующим образом:

label: { 
    fontColor: "Blue", 
    fontSize: 20 
} 

Вот пример на jsfiddle: http://jsfiddle.net/g3r57cee/

Некоторые больше информации на этикетках можно найти на http://docs.anychart.com/latest/Common_Settings/Labels