温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - How to show circular progress pie chart using the highcharts

javascript - 如何使用highcharts显示圆形进度饼图

发布于 2020-03-28 23:21:31

我想实现这样的目标。

在此处输入图片说明

这是我到目前为止的内容:

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Browser market share, January, 2018'
    },
            subtitle: {
                text: `<div>80%</div> of Total`,
                align: "center",
                verticalAlign: "middle",
                style: {
                  "fontSize": "7px",
                  "textAlign": "center"
                },
                x: 0,
                y: -2,
                useHTML: true
              },
    plotOptions: {
                   pie: {
                  shadow: false,
                  center: ["50%", "50%"],
                  dataLabels: {
                    enabled: false
                  },
                  states: {
                    hover: {
                      enabled: false
                    }
                  },
                  size: "45%",
                  innerSize: "95%",
                  borderColor: null,
                  borderWidth: 8
                }

    },
    tooltip: {
        valueSuffix: '%'
    },
    series: [{
          y: 80,


          color: {
            linearGradient: {
              x1: 0,
              x2: 0,
              y1: 0,
              y2: 1
            },
            stops: [
              [0, "#000"],
              [1, "#b0bfc6"]
            ]
          },
          name: "Speed"
        },
        {
          y: 20,
          color: "#000",
          name: "Non Prioritised"
        }],
});

这是小提琴:https : //jsfiddle.net/gm8krq9L/

但是我无法获得不同的颜色来显示图表上的进度效果。我看到有一个名为:的类型chart: solidgauge,但是我的应用程序不支持,因为我必须包括solidgauge文件才能加载这种图表。有没有一种方法可以将图表类型用作饼图呢?

谢谢

查看更多

查看更多

提问者
user1234
被浏览
43
Maxime Lafarie 2020-02-03 17:42

您想要的就是甜甜圈图。我已经为此类图表制作了一个示例,是否想要类似此示例的内容?

无论如何,这是一个有用的例子

数据就像您使用的数据:

  series: [{
    innerSize: '80%',
    data: [{
      name: 'Speed',
      y: 80,
      color: '#e7eaeb'
    }, {
      name: 'Non Prioritised',
      y: 20,
    }]
  }],