highcharts 一个大圆圈有一个小圆圈固定在高位图中的位置

oogrdqng 于 2023-04-30 发布在 Highcharts

关注(0)|答案(1)|浏览(177)

我试图创建一个自定义 Package 气泡图，但我似乎不能实现我想要的设计。我已经在Highcharts文档中搜索并尝试了各种方法，但似乎仍然没有找到我要找的东西。我希望你能提供一些建议来帮助我，非常感谢！
这是我的代码

import classNames from "classnames/bind";
import styles from "./CircleGrid.module.scss";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import More from "highcharts/highcharts-more";
More(Highcharts);

type Tpackedbubble = {
data?: any;
backgroundColor?: any;
};
enter image description here
const fakeData = [
{ name: "A", value: 12, color: "#000000" },
{ name: "B", value: 50, color: "#000000" },
{ name: "C", value: 2, color: "#000000" },
];

const CircleGrid = ({
data = fakeData,
backgroundColor = "white",
}: Tpackedbubble) = {
const cx = classNames.bind(styles);

const options = {
chart: {
type: "packedbubble",
renderTo: "container",
backgroundColor: backgroundColor,
},

    tooltip: {
      useHTML: true,
      headerFormat: "",
      pointFormat: "<b>Member :</b> {point.value} </sub>",
    },
    
    title: {
      useHTML: false,
      text: "",
    },
    legend: {
      enabled: false,
    },
    credits: {
      text: "",
    },
    plotOptions: {
      packedbubble: {
        minSize: "50%",
        maxSize: "200%",
        zMin: 0,
        zMax: 300,
        layoutAlgorithm: {
          splitSeries: false,
          gravitationalConstant: 0.02,
        },
        dataLabels: {
          enabled: true,
          format: "{point.name}",
          style: {
            color: "white",
            textOutline: "none",
            fontWeight: "500",
            fontSize: "15",
            fontFamily: "CircularStd",
          },
        },
      },
    },
    
    series: [
      {
        data,
      },
    ] as TSeries[],

};

return (
<div style={{ width: "100%", height: "440px" }}\>
<HighchartsReact
highcharts={Highcharts}
options={options}
containerProps={{
style: { marginLeft: "auto", marginRight: "auto", height: "inherit" },
}}
/\>
\</div\>
);
};

export default CircleGrid;

我的气泡图enter image description here
这是我尝试enter image description here

highcharts

来源：https://stackoverflow.com/questions/76084321/a-big-circle-has-a-small-circle-fixed-in-a-position-within-the-highcharts

1条答案

按热度按时间

2vuwiymt1#

您可以使用Highcharts.SVGRenderer类在图表上添加自定义SVG元素。在您的例子中，最好的方法似乎是将circle形状的标签添加到每个泡点。例如：

chart: {
    ...,
    events: {
      render() {
        const chart = this;

        chart.series[0].points.forEach(point => {
          const centerX = point.plotX;
          const centerY = point.plotY;
          const radius = point.radius;

          const halfRadiusX = radius / Math.sqrt(2);
          const halfRadiusY = radius / Math.sqrt(2);

          const pointX = centerX + halfRadiusX;
          const pointY = centerY - halfRadiusY;

          if (!point.customCircle) {
            point.customCircle = chart.renderer.label('2', null, null, 'circle').attr({
              fill: 'gray',
              'stroke-width': 1,
              width: 30,
              height: 30,
              'text-align': 'center',
              zIndex: 3
            }).css({
              color: 'white'
            }).add();
          }

          point.customCircle.attr({
            x: pointX + chart.plotLeft,
            y: pointY + chart.plotTop
          });
        });
      }
    }
  }

现场演示：http://jsfiddle.net/BlackLabel/zLu3192h/
API引用：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

赞(0）回复(0）举报 2023-04-30

我来回答

highcharts 一个大圆圈有一个小圆圈固定在高位图中的位置

1条答案

相关问题

热门标签

最新问答