Chart.js set Donut Hintergrundfarbe?

Question

Ich benutze chart.js (Dokumentation), aber ich kann nicht scheinen a Hintergrundfarbe zum Donut Weg. Es wird in den Dokumenten nicht einmal erwähnt.

Was ich versuche zu erreichen:

Aktueller Code:

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);

---

AKTUALISIEREN: Ich habe es derzeit mit a gelöst Duplikat Donut (2. Leinwand) mit einem Wert von 100, ohne Animation und meiner gewünschten (Hintergrund-) Farbe und positionierte sie absolut unter dem 1..

Dies ist jedoch ein böser Trick und sehr ineffizient. Ich hoffe immer noch auf eine korrekte Antwort.

Answer 1

Ich löste es mit einem doppelten Donut (2. Leinwand) mit einem Wert von 100, ohne Animation und meiner gewünschten Hintergrundfarbe und positionierte es absolut unter dem 1..

Dies ist jedoch ein böser Trick und sehr ineffizient. Ich hoffe immer noch auf eine korrekte Antwort.

Answer 2

Ich dachte, ich würde eine aktuelle Lösung veröffentlichen, die für mich mit V2.1.0 funktioniert hat, was eingeführt wurde Plugins.

Diagramm ohne Wert mit einem Hintergrund vs -Diagramm mit Wert, der den Hintergrund abdeckt. Nur das Hauptdiagramm wird animieren. Der Hintergrund ist nur ein einfacher Bogen:

---

Ich habe zuerst ein Plugin pro registriert ihre Dokumente:

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());

Die Singleton -Syntax sollte nur in der Lage sein, die Duplikation zu verringern und dasselbe zu verwenden draw Methode für mehrere Plugin -Ereignisse.

---

Dann habe ich mein neues registriertes Plugin wie SO verwendet:

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 Fiddle hier

Answer 3

Ich habe den Code von @Jonlunsford verwendet, aber es hat nicht funktioniert, als ich Diagramme auf 3.x aktualisierte.

Laut dem Migrationsleitfaden, Es sagt

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

Also habe ich den Code geändert in:

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,
}

Wenn Sie dann ein Diagramm erstellen, können Sie die Optionen wie folgt verwenden:

  ...
  plugins: {
    legend: {
      display: false,
    },
    doughnutBackground: {
      enabled: true,
      color: '#E4E6E6',
    },
    ...
  },

Answer 4

Wahrscheinlich gibt es keine Möglichkeit, wie Sie es im Canvas -Element tun können. Ich würde ein absolut positioniertes Element über die Leinwand hinaus platzieren. Hier ist ein Beispiel:

.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: "";
}