在任何图表中设置各个标签上的字体大小

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