时间戳

首页 > 解决方案 > 如何在图表js中设置饼图样式？我想改变边框颜色、边框宽度并给它们阴影

chart.js - 如何在图表js中设置饼图样式？我想改变边框颜色、边框宽度并给它们阴影

问题描述

这是我的 HTML div：

<canvas id="mycanvas" width="290" height="140"></canvas>

JavaScript：

$(document).ready(function() {
  var ctx = $("#mycanvas").get(0).getContext("2d");    
  var data = [{
      value: 923864,
      color: "#58508d",
      highlight: "#003f5c",
      label: "Dr. John",
    },
    {
      value: 720988,
      color: "#3292b0",
      highlight: "#6fefff",
      label: "Alex"
    },
    {
      value: 179539,
      color: "orange",
      highlight: "darkblue",
      label: "Other",
    },
  ];
  var piechart = new Chart(ctx).Pie(data);
});

标签： chart.js

解决方案

首先，您应该升级到最稳定的 Chart.js 版本，目前是 v2.9.4。

dataset接受的属性数量，可以定义为边框样式。它的颜色和宽度通过以下控制。

  • borderColor弧形边框颜色
  • borderWidth弧形边框宽度（以像素为单位）。

为了看到阴影，您可以使用Plugin Core API。API 提供了一系列可用于执行自定义代码的钩子。beforeDraw例如，您可以通过 绘制一个带有阴影的圆圈CanvasRenderingContext2D.arc()。

请在下面查看您修改后的代码，看看它是如何工作的。

new Chart('canvas', {
  type: 'pie',
  plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.fillStyle = 'white';
      ctx.shadowColor = 'black';
      ctx.shadowBlur = 20;
      ctx.shadowOffsetX = -10;
      ctx.shadowOffsetY = 0;
      const x = chart.chart.width / 2;
      const y = chart.chart.height / 2 + 15;
      ctx.arc(x, y, 95, 0, Math.PI*2, false);
      ctx.fill();
      ctx.restore();
    }
  }],
  data: {
    labels: ['Dr. John', 'Alex', 'Other'],
    datasets: [{
      data: [923864, 720988, 179539],
      backgroundColor: ['#58508d', '#3292b0', 'orange'],
      hoverBackgroundColor: ['#003f5c', '#6fefff', 'darkblue'],
      borderWidth: 0
    }],
  },
  options: {
    responsive: false,
    layout: {
      padding: {
        top: 15,
        bottom: 20
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="canvas" height="260"></canvas>

推荐阅读