在Donut图表javascript或vuejs中使用箭头添加文本标签中心

时间:2019-03-28 06:30:20

标签: javascript vuejs2

这是我的饼图,但是我如何绘制三角形并像底部图像一样旋转,请帮助我。

enter image description here

我们如何创建这样的饼图,请帮助我enter image description here,如图中带有中心箭头的图(未解析和已解析的值)。我怎样才能做到这一点?谢谢

这是我的代码

renderDoughnutChart(){
      this.renderChart(
        {
          labels: this.labels,
          datasets: [
            {
              backgroundColor: this.bgcolor,
              data: this.share_percentage,
              borderWidth: 0,
              borderColor: "#777"  
            }
          ],
          text: "100%"
        },
        { 
          calculable: true,
          borderWidth: 1,
          borderColor: "#777",
          legend: {
            data: this.labels+' '+this.share_percentage,
            borderRadius: 6,
            display: true,
            x: "center",
            y: "bottom",
            position: "left",      fontFamily: "Montserrat",
            fontSize: "16px",
            fontweight: 600,
            labels: {
              fontFamily: "Montserrat",
              fontweight: 600,
              boxWidth: 15,
              padding: 15,
              fontColor: "#3E4B8A"
            },
            onClick:this.handlelegend
          },
          fontColor: "#00B8EB",
          fontFamily: "Montserrat",
          fontSize: "16px",
          fontweight: 600,
          calculable: true,
          maintainAspectRatio: false,
          showDatapoints: true,
          tooltips: {
            enabled: true,
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          pieceLabel: {
            render: "label",
            arc: true,
            fontColor: "#3E4B8A",
            position: "outside",
            fontFamily: "Montserrat",
            fontSize: "16px"
          },
          responsive: true,
          animation: {
            animateScale: true,
            animateRotate: true
          },  
          onHover: function(evt, item) { 
          }  
        }
      );
    },

0 个答案:

没有答案