趋势

Question

你有一种＆＃34; half gauge＆＃34;，它显示了它上面的趋势？如图所示：enter image description here

出于商业目的，我们愿意购买许可证

Answer 1

是的，您可以使用AnyChart库创建所需的图表。我们准备了一个类似的样本，您可以在下面查看。

如需购买AnyChart，请通过电子邮件与我们联系 - sales@anychart.com

var data = [45, 67, 56];
var axisMaximum = 100;
data.push(axisMaximum);
var dataSet = anychart.data.set(data);

anychart.onDocumentReady(function () {

  var stage = anychart.graphics.create("container");

  var circularGauge = anychart.gauges.circular();
  circularGauge.data(dataSet);
  circularGauge.fill('#fff')
.stroke(null)
.padding(0)
.startAngle(270)
.sweepAngle(180);

  var circularAxis = circularGauge.axis().radius(100).width(1).fill(null);
  circularAxis.scale()
.minimum(0)
.maximum(axisMaximum);
  circularAxis.labels().enabled(false);
  circularAxis.ticks().enabled(false);
  circularAxis.minorTicks().enabled(false);

  circularGauge.bar(0).dataIndex(0)
.radius(100)
.width(15)
.fill('red')
.stroke(null)
.zIndex(5);

  circularGauge.bar(1).dataIndex(3)
.radius(100)
.width(15)
.fill('#cecece')
.stroke(null)
.zIndex(3);

  // marker
  circularGauge.marker(0)
.axisIndex(0)
.dataIndex(1)
.size(7)
.stroke(null)
.fill('blue')
.type("triangle-down")
.position("outside")
.radius(108);

  // marker
  circularGauge.marker(1)
.axisIndex(0)
.dataIndex(2)
.size(7)
.stroke(null)
.fill('green')
.type("triangle-down")
.position("outside")
.radius(108);

  var circularLabel0 = circularGauge.label(0);
  circularLabel0
.enabled(true)
.anchor('center-bottom')
.useHtml(true)
.hAlign("center")
.text("<p style='color:red; font-size:20'>30 %</p><br>" +
      "<p style='color:black; font-size:20; text-decoration:overline;'>% of Gross sales</p>");

  var circularLabel1 = circularGauge.label(1);
  circularLabel1
.enabled(true)
.anchor('center-top')
.padding(15)
.fontSize(20)
.fontColor('black')
.text('Product 1.1');

  var circularTitle = circularGauge.title();
  circularTitle.enabled(true)
.text('Division 1')
.fontColor('black')
.fontSize(25);


  circularGauge.container(stage).draw();
});

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

<link href="https://cdn.anychart.com/releases/8.2.1/fonts/css/anychart-font.min.css" rel="stylesheet"/>
<link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-circular-gauge.min.js"></script>
<div id="container"></div>