javascript - 如附图所示，如何构建修改后的 PieGraph？

Question

我有兴趣构建一个如下图所示的 pieGraph，但不知道从哪里开始并且可以使用建议。

图表库胜利有以下内容： https ://formidable.com/open-source/victory/gallery/animating-circular-progress-bar

ChartJs 有甜甜圈和派： http: //www.chartjs.org/docs/latest/charts/doughnut.html

但是这些都没有接近屏幕截图。我该如何构建它，是否有一个可以工作的图表库？

Answer 1

上次我做了一些（非常）相似的事情，我使用了普通的 SVG——因为 React 可以像 HTML 一样创建 SVG，所以你应该很快地设置好：

 <svg height="120" width="120" style="background: green; ">
  <circle cx="60" cy="60" r="45" stroke="white" stroke-width="1" fill="none"></circle>
  <path d="M 60 105 A 45 45 0 0 0 68 16" stroke="darkred" stroke-width="10" fill="none" />
  <text style="font-size: 20px; " text-anchor="middle" x="60" y="70" stroke="white">47%</text>
</svg>

路径（弧线）与圆具有相同的中心，从底部开始60+45逆时针向上。本质上，我用 sin 和 cos 计算了结束角：

x=Math.round(60+45*Math.sin(0.47*2*Math.PI)) // 68
y=Math.round(60+45*Math.cos(0.47*2*Math.PI)) // 16

将其填充到反应中将为您提供：

class Donut extends React.PureComponent {
  render() { return (
    <svg height="120" width="120" style={{background: 'green'}}>
    <circle cx="60" cy="60" r="45" stroke="white" stroke-width="1" fill="none"></circle>
    <path d={'M 60 105 A 45 45 0 '+(this.props.percent>50?'1':'0')+' 0 '+Math.round(60+45*Math.sin(2*Math.PI*this.props.percent/100))+' '+Math.round(60+45*Math.cos(2*Math.PI*this.props.percent/100))} stroke="darkred" strokeWidth="10" fill="none" />
    <text style={{fontSize: '20px'}} textAnchor="middle" x="60" y="70" stroke="white">{this.props.percent+'%'}</text>
  </svg>
  );}
}

// finally: render
ReactDOM.render(<Donut percent={47} />, document.getElementById('dnt1'));
ReactDOM.render(<Donut percent={53} />, document.getElementById('dnt2'));

它还考虑了小/长弧。

如果您想直接使用，我也将此代码放入 codepen：https ://codepen.io/sebredhh/pen/zEWoLy

因为它不是那么多，它可能不是你最初想到的答案，但也许你仍然觉得它很有用......

Answer 2

检查Gauge -solid官方 highcharts 示例。我做了一些配置更改，看起来像帖子中发布的那样。

var gaugeOptions = {

  chart: {
    type: 'solidgauge',
    margin: [0, 0, 20, 0]
  },

  title: null,

  pane: {
    center: ['50%', '60%'],
    size: '100%',
    startAngle: -130,
    endAngle: 130,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '95%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },

  tooltip: {
    enabled: false
  },

  // the value axis
  yAxis: {
    stops: [
      [0.1, '#55BF3B'], // green
      [0.5, '#DDDF0D'], // yellow
      [0.9, '#DF5353'] // red
    ],
    lineWidth: 0,
    minorTickInterval: null,
    tickAmount: 2,
  },

  plotOptions: {
    solidgauge: {
      innerRadius: '95%',
      dataLabels: {
        y: 5,
        borderWidth: 0,
        useHTML: true
      }
    }
  }
};

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 24,
    labels: {
      enabled: false,
    },

  },

  credits: {
    enabled: false
  },

  series: [{
    name: 'Speed',
    data: [13],
    dataLabels: {
      format: '<div style="text-align:center"><span style="font-size:50px;color:' +
        ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
        '<span style="font-size:12px;color:silver">HRS</span></div>'
    },
    tooltip: {
      valueSuffix: ' HRS'
    }
  }]

}));


// Bring life to the dials
setInterval(function() {
  // Speed
  var point,
    newVal,
    inc;

  if (chartSpeed) {
    point = chartSpeed.series[0].points[0];
    inc = Math.round((Math.random() - 0.5) * 24);
    newVal = point.y + inc;

    if (newVal < 0 || newVal > 24) {
      newVal = point.y - inc;
    }

    point.update(newVal);
  }


}, 2000);

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div style="width: 600px; height: 00px; margin: 0 auto">
  <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
</div>