改变线条图的颜色

Question

在这个链接中，有一个由Zoomcharts创建的饼形图的例子。若要更改片外标签的颜色，我可以使用styleFunction修改slice选项。

styleFunction: function (slice, data) {
  slice.label.textStyle.fillColor = 'red';
},

这只会改变字母的颜色。我也想改变连接片和标签的线的颜色。谢谢。

Answer 1

你可以试试这个

 slice: {
          connectorStyle: {
            lineColor: 'red' // Color you to give to the line of the chart connection
          }
        }

要了解更多信息，您可以入住。

https://zoomcharts.com/developers/en/pie-chart/api-reference/settings/slice/connectorStyle.html

希望你能得到答案。

检查解决方案

​

    var data = {
        "subvalues": [
        {
            "value": 50, "name": "Apples", "subvalues": [
               { "value": 25, "name": "Red apples" },
               { "value": 15, "name": "Yellow apples" },
               { "value": 10, "name": "Green apples" }]
        },
        {
            "value": 30, "name": "Oranges", "subvalues": [
               { "value": 10, "name": "Big oranges" },
               { "value": 9, "name": "Small oranges" },
               { "value": 7, "name": "Green oranges" },
               { "value": 4, "name": "Pink oranges" }]
        },
        {
            "value": 20, "name": "Grapes", "subvalues": [
               { "value": 15, "name": "Sweet grapes" },
               { "value": 5, "name": "Sour grapes" }]
        },
        { "value": 50, "name": "Vegetables", style: { fillColor: "yellow" } }]
    };

    var t = new PieChart({
        container: document.getElementById("demo"),
        area: { height: 350 },
        data: { preloaded: data },
        slice: {
            styleFunction: function (slice, data) {
            slice.label.textStyle.fillColor = 'red';

          },
          connectorStyle: {
          lineColor: 'red'
          }
        }
    });

<script src="https://cdn.zoomcharts-cloud.com/1/latest/zoomcharts.js"></script>

<div id="demo"></div>

​