highcharts 饼图 去掉指示线

要想在 Highcharts 饼图中去掉指示线，可以设置 `series.dataLabels.connectorWidth` 和 `series.dataLabels.connectorPadding` 属性为 0。具体的代码如下：

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  series: [{
    data: [{
      name: 'Chrome',
      y: 61.41,
      sliced: true,
      selected: true
    }, {
      name: 'Internet Explorer',
      y: 11.84
    }, {
      name: 'Firefox',
      y: 10.85
    }, {
      name: 'Edge',
      y: 4.67
    }, {
      name: 'Safari',
      y: 4.18
    }, {
      name: 'Other',
      y: 7.05
    }],
    dataLabels: {
      connectorWidth: 0,
      connectorPadding: 0
    }
  }]
});

以上代码会生成一个没有指示线的 Highcharts 饼图。

相关问题

highcharts 饼图配置项

Highcharts饼图的配置项包括以下内容：

1. `legend`：图例的设置，可以控制图例的显示、布局、背景颜色等。

2. `plotOptions`：绘图选项，可以设置饼图的大小、内圈直径等。

3. `tooltip`：提示框的设置，可以定义提示框的格式。

4. `chart`：图表的设置，包括类型、背景颜色、边距等。

5. `title`：标题的设置。

6. `series`：数据列的设置，可以定义饼图的数据以及数据标签的样式。

这些配置项可以通过Javascript对象的方式进行设置，例如：

let option = {
  chart: {
    type: "pie",
    backgroundColor: "rgba(0, 0, 0, 0)",
    marginTop:10,
    options3d: {
      enabled: true,
      alpha: 50,
      beta: 0,
    },
  },
  title: {
    text: "",
  },
  plotOptions: {
    pie: {
      borderColor: "#000",
      borderWidth: 1,
      allowPointSelect: true,
      cursor: "pointer",
      depth: 24,
      dataLabels: {
        enabled: true,
        format: "{point.name}",
        style: {
          textOutline: "none",
          color: "rgba(45,153,255,1)",
          fontSize: 11,
        },
      },
    },
  },
  series: [
    {
      type: "pie",
      data: [
        ["邮政包裹", 30],
        ["圆通快递", 20],
        ["京东快递", 30],
        ["申通快递", 50],
        ["德邦物流", 20],
        ["天天快递", 20],
        ["其他", 30],
        ["顺丰快递", 10],
        ["中通快递", 30],
        ["韵达快递", 20],
      ],
    },
  ],
};

Highcharts.chart("DispatchProportion", option);

以上就是绘制Highcharts饼图所需的配置项。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Highcharts 3D饼图（1）上手使用配置](https://blog.csdn.net/kkk_xxx/article/details/109380972)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [highcharts 饼图常用设置项](https://blog.csdn.net/qq_26769677/article/details/80229195)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue highcharts 3d饼图

您好！要在Vue中使用Highcharts的3D饼图，您需要按照以下步骤进行操作：

1. 首先，您需要安装Highcharts和Highcharts-Vue插件。使用以下命令进行安装：

npm install highcharts --save
npm install highcharts-vue --save

2. 在您的Vue组件中引入Highcharts和Highcharts-Vue插件，并注册Highcharts模块。您可以在需要使用3D饼图的组件中进行这些操作。请注意，需要引入3D模块。

import HighchartsVue from 'highcharts-vue';
import Highcharts from 'highcharts';
import highcharts3d from 'highcharts/highcharts-3d';

// 注册Highcharts模块
HighchartsVue(Highcharts);

// 启用3D模块
highcharts3d(Highcharts);

3. 在组件的模板中使用`<highcharts>`标签，并通过`options`属性传递配置项来绘制3D饼图。以下是一个示例：

<template>
  <div>
    <highcharts :options="chartOptions"></highcharts>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        chart: {
          type: 'pie',
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0,
          },
        },
        title: {
          text: '3D Pie Chart',
        },
        series: [
          {
            name: 'Brands',
            colorByPoint: true,
            data: [
              {
                name: 'Chrome',
                y: 61.41,
              },
              {
                name: 'Internet Explorer',
                y: 11.84,
              },
              {
                name: 'Firefox',
                y: 10.85,
              },
              {
                name: 'Edge',
                y: 4.67,
              },
              {
                name: 'Safari',
                y: 4.18,
              },
              {
                name: 'Other',
                y: 7.05,
              },
            ],
          },
        ],
      },
    };
  },
};
</script>

请注意，以上示例仅供参考，您可以根据自己的需求进行相应的配置和样式调整。

希望能帮助到您！如有任何疑问，请随时提问。