任意の図表の個々のラベルにフォントサイズを設定

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> 

されており、ここで私は私が

を達成しようとしているかを示すために、Photoshopで作成した写真であります

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

で見つけることができます