-2

下の画像に示すように、pieGraph を構築することに興味がありますが、どこから始めればよいかわかりません。推奨事項を使用できます。

Charting Library Victory には次のものがあります 。

ChartJs にはドーナツとパイがあります: http://www.chartjs.org/docs/latest/charts/doughnut.html

しかし、これらのどれもスクリーンショットに近づきません。どうすればこれを構築できますか?動作するグラフ作成ライブラリはありますか?

円グラフ

4

2 に答える 2

1

ゲージソリッドの公式ハイチャートの例を確認してください。投稿に投稿されたように見えるように、いくつかの構成変更を加えました。

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>

于 2017-10-09T10:48:08.570 に答える