0

anychart を使用して作成している円グラフがあります。

円グラフのラベルはすべて正しいフォント ファミリと色を使用していますが、私がやりたいのは、各部分に異なるフォント サイズを設定できるようにすることです。最大のスライスでフォント サイズを大きく設定したい。

これが私のフィドルです

ここに私の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>

そして、これは私が達成しようとしていることを示すためにフォトショップで作成した写真です

Anychart

4

1 に答える 1