7

Chart.js（ドキュメント）を使用していますが、ドーナツパスに背景色を設定できないようです。ドキュメントにも記載されていません。

私が達成しようとしていること：

ここに画像の説明を入力

現在のコード:

var meterInvoicesData = [
    {
        value: 75,
        color: '#22d319'
    },
    {
        value: 25,     // rest
        color: 'transparent'  // invisible (setting this as background color will animate it too)
    }
];

var meterOptions =
{
    percentageInnerCutout : 80,
    animationEasing : 'easeInQuint'
};

var meterInvoices = new Chart(document.getElementById('meterInvoices').getContext('2d')).Doughnut(meterInvoicesData,meterOptions);

更新:現在、値が 100 の複製ドーナツ (2 番目のキャンバス)、アニメーションなし、目的の (背景) 色を使用して解決し、1 番目のものの下に絶対に配置しました。

ただし、これは厄介なトリックであり、非常に非効率的であるため、正しい答えを期待しています。

4

4 に答える 4

11

pluginsを導入した v2.1.0 を使用して、私のために働いた最近のソリューションを投稿したいと思いました。

背景を表示する値のないグラフ vs 背景を覆う値のグラフ。メイン グラフのみがアニメーション化され、背景は単純な円弧です。

背景を表示する値のないチャート 背景をカバーする値を持つグラフ

私は最初に彼らのドキュメントに従ってプラグインを登録しました:

var radiusBackground = function() {
  var self = this;

  self.draw = function(chartInstance) {
    if(chartInstance.options.radiusBackground) {
      var x = chartInstance.chart.canvas.clientWidth / 2,
          y = chartInstance.chart.canvas.clientHeight / 2,
          ctx = chartInstance.chart.ctx;

      ctx.beginPath();
      ctx.arc(x, y, chartInstance.outerRadius - (chartInstance.radiusLength / 2), 0, 2 * Math.PI);
      ctx.lineWidth = chartInstance.radiusLength;
      ctx.strokeStyle = chartInstance.options.radiusBackground.color || '#d1d1d1';
      ctx.stroke();
    }
  };

  // see http://www.chartjs.org/docs/#advanced-usage-creating-plugins for plugin interface
  return {
    beforeDatasetsDraw: self.draw,
    onResize: self.draw
  }
};

// Register with Chart JS
Chart.plugins.register(new radiusBackground());

drawシングルトン構文は、重複を減らし、複数のプラグイン イベントに同じメソッドを使用できるようにするためのものでした。

次に、新しく登録したプラグインを次のように使用しました。

var chartElement = document.getElementById('doughnut-chart');

var chart = new Chart(chartElement, {
  type: 'doughnut',
  options: {
    // Here is where we enable the 'radiusBackground'
    radiusBackground: {
      color: '#d1d1d1' // Set your color per instance if you like
    },
    cutoutPercentage: 90,
    title: {
      display: false,
    },
    legend: {
      display: false,
    },
  },
  data: {
    labels: ["Type 1", "Type 2", "Type 3"],
    datasets: [{
      data: [2, 5, 1],
      backgroundColor: ["#a3c7c9","#889d9e","#647678"],
      borderWidth: 0,
      hoverBackgroundColor: ["#96b7b9","#718283","#5c6b6d"]
    }]
  }
});

ここでJSフィドル

于 2016-08-22T19:21:25.923 に答える
2

@Jonlunsford のコードを使用しましたが、ChartJS を 3.x にアップグレードしたときに機能しませんでした。

Migration Guideによると、それは言う

Chart.innerRadius now lives on doughnut, pie, and polarArea controllers

そこで、コードを次のように変更しました。

import { Chart, DoughnutController } from 'chart.js'

type DoughnutChartBackgroundPluginOptions = {
  enabled: boolean
  color: string
}

function handler(chart: Chart<'doughnut'>, args, options: DoughnutChartBackgroundPluginOptions) {
  const { ctx, width, height } = chart

  const { innerRadius } = chart.getDatasetMeta(chart.data.datasets.length - 1).controller as DoughnutController
  const { outerRadius } = chart.getDatasetMeta(0).controller as DoughnutController
  const radiusLength = outerRadius - innerRadius

  if (options.enabled) {
    const x = width / 2,
      y = height / 2

    ctx.beginPath()
    ctx.arc(x, y, outerRadius - radiusLength / 2, 0, 2 * Math.PI)
    ctx.lineWidth = radiusLength
    ctx.strokeStyle = options.color
    ctx.stroke()
  }
}

export default {
  id: 'doughnutChartBackground',
  beforeDatasetsDraw: handler,
}

次に、チャートを作成するときに、次のようにオプションを使用できます。

  ...
  plugins: {
    legend: {
      display: false,
    },
    doughnutBackground: {
      enabled: true,
      color: '#E4E6E6',
    },
    ...
  },
于 2021-05-30T18:46:39.773 に答える
1

値が 100 の複製ドーナツ (2 番目のキャンバス)、アニメーションなし、目的の背景色を使用して解決し、1 番目のものの下に絶対に配置しました。

ただし、これは厄介なトリックであり、非常に非効率的であるため、正しい答えを期待しています。

于 2014-03-01T23:38:28.373 に答える
0

おそらく、キャンバス要素でそれを行う方法はありません。キャンバスを超えて絶対配置要素を配置します。例を次に示します。

.fakeCircle {
    position: absolute;
    z-index: 0;
    border-radius: 90px;
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    background-color: #dadce8;
    width: 50px;
    height: 50px;
    top: 12px;
    left: 12px;
}
.fakeCircle:after {
    position: absolute;
    z-index: 0;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    background-color: #fff;
    width: 34px;
    height: 34px;
    content: "";
}
于 2015-03-11T13:24:13.527 に答える