highcharts 如何在朝阳图中沿着各个线段绘制每个数据标签?

tmb3ates  于 2022-11-11  发布在  Highcharts
关注(0)|答案(3)|浏览(157)

我的要求用简短的短语表示:

我正在寻找一个功能,在朝阳图表 * 曲线数据标签沿着个别段 *。(类似于this Google result的东西)。
是否有一个功能已经在朝阳图?
如果是,您能否提供一个示例?

我的要求(详细说明):

请看一下attachment,这是highcharts朝阳图。正如你在附件中看到的,虽然每个部分都有很多空间,但数据标签仍然被砍掉,并在数据标签的末尾添加了“...”省略号。
是否有办法使用段中的剩余空间来尽可能多地显示数据标签?
是否有一个功能已经在朝阳曲线的文字沿着段?(类似于this Google result)或尚未开发?
如果已经有一个功能,你能给我一个例子吗?
提前感谢!

已参考的建议:

  1. Highcharts: Is it possible to show Sunburst chart series data labels outside the leaf level nodes with connectors?
ryevplcw

ryevplcw1#

不幸的是,我们仍然没有实现这样的功能,因为它没有在我们的UserVoice平台上获得足够的选票,但一切都没有失去。
下面是一个可以帮助你自己做的例子:http://jsfiddle.net/Lcnon9ss/。该示例基于pie系列类型,但它应该很快就能满足您的要求。
此外,您可以在上面提到的UserVoice平台上对该功能进行投票,以下是链接:https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/34591699-ability-to-write-the-labels-of-the-sunburst-chart
此致!

xesrikrc

xesrikrc2#

我遇到了同样的问题,我通过为数据标签添加textPath解决了该问题,如下所示:

...series:[ ...
  dataLabels: {
    textPath: {
      enabled: true,
      attiributes: {
        startOffset: '10%',
        textAnchor: 'start',
      }
    }
  }

您可以根据需要调整参数“startOffset”和“textAnchor”。

e37o9pze

e37o9pze3#


https://codesandbox.io/s/antd-sunburst-customization-7q4wq
您可以点击以下链接进行定制

import { Sunburst } from "@ant-design/charts";

const CustomSunburst = (props) => {
  const [data, setData] = useState([]);

  function getCustomArray(value) {
    if (value > 0) {
      let arra = [];
      arra.push({ value: value, name: "USER" });
      return arra;
    } else {
      return [];
    }
  }

  useEffect(() => {
    var dataa = {
      children: [
        {
          type: "ABC",
          name: `ABC`,
          value: 4,
          children: getCustomArray(2)
        },
        {
          type: "XYZ",
          name: `XYZ`,
          value: 2,
          children: getCustomArray(3)
        },
        {
          type: "MNO",
          name: `MNO`,
          value: 4,
          children: getCustomArray(5)
        }
      ]
    };
    setData(dataa);
  }, []);

  var config = {
    data: data,
    color: ["#00A5A0", "#057DAF", "#05AF79"],
    innerRadius: 0.35,

    interactions: [{ type: "element-active" }],
    sunburstStyle: (datum) => {
      if (datum.path === "ABC / USER") {
        return {
          fill: "#74ECE9",
          fillOpacity: 0.9
        };
      }
      if (datum.path === "XYZ / USER") {
        return {
          fill: "#74C9EC",
          fillOpacity: 0.9
        };
      }
      if (datum.path === "MNO / USER") {
        return {
          fill: "#70F7CC",
          fillOpacity: 0.9
        };
      }
    },
    tooltip: {
      customContent: (title, data) => {
        if (data[0]?.name === "ABC / USER") {
          return (
            <div style={{ padding: 10, fontWeight: "600" }}>
              AMC Users Count : {data[0]?.value}
            </div>
          );
        }
        if (data[0]?.name === "XYZ / USER") {
          return (
            <div style={{ padding: 10, fontWeight: "600" }}>
              XYZ Users Count : {data[0]?.value}
            </div>
          );
        }
        if (data[0]?.name === "MNO / USER") {
          return (
            <div style={{ padding: 10, fontWeight: "600" }}>
              MNO Users Count : {data[0]?.value}
            </div>
          );
        }

        if (data[0]?.name === "ABC") {
          return (
            <div style={{ padding: 10, fontWeight: "600" }}>
              AMC Site Count : {data[0]?.data?.data?.value}
            </div>
          );
        }
        if (data[0]?.name === "XYZ") {
          return (
            <div style={{ padding: 10, fontWeight: "600" }}>
              XYZ Site Count : {data[0]?.data?.data?.value}
            </div>
          );
        }
        if (data[0]?.name === "MNO") {
          return (
            <div style={{ padding: 10, fontWeight: "600" }}>
              MNO Site Count : {data[0]?.data?.data?.value}
            </div>
          );
        } else {
          return "NO DATA";
        }
      }
    }
  };

  return (
    <>
      <Sunburst {...config} height={300}></Sunburst>
      <div
        style={{
          position: "absolute",
          top: "44%",
          left: "47%",
          fontWeight: "600"
        }}
      >
        Lorem /
      </div>
      <div
        style={{
          position: "absolute",
          top: "49%",
          left: "47%",
          fontWeight: "600"
        }}
      >
        Ipsum
      </div>
    </>
  );
};

export default CustomSunburst;

相关问题