wake-up-neo.com

Verwenden von Chartist.js Wie ändern Sie die Farbe des Strichs für ein Donutdiagramm?

Hallo, ich versuche, das folgende Donut-Diagramm mit Chartist.js zu erstellen:

ZIELTABELLE

So sieht das Diagramm derzeit aus:

Chartist.js Donut-Diagramm

Ich versuche herauszufinden, wo oder wie ich die Farben dieses Diagramms an das erste Donutdiagramm anpassen kann. Das Rot und das Rosa scheinen die Standardeinstellungen zu sein. Ich habe keine Dokumentation gefunden, wie ich dieses Ziel erreichen kann. Ich möchte auch die Größe des Strichs und die Größe des Diagramms selbst anpassen. Jede Hilfe wird sehr geschätzt!

Aktueller Code:

// ** START CHARTIST DONUT CHART ** //
var chart = new Chartist.Pie('.ct-chart', {
  series: [70, 30],
  labels: [1, 2]
}, {
  donut: true,
  showLabel: false
});
chart.on('draw', function(data) {
  if(data.type === 'slice') {
    // Get the total path length in order to use for dash array animation
    var pathLength = data.element._node.getTotalLength();

    // Set a dasharray that matches the path length as prerequisite to animate dashoffset
    data.element.attr({
      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
    });
    // Create animation definition while also assigning an ID to the animation for later sync usage
    var animationDefinition = {
      'stroke-dashoffset': {
        id: 'anim' + data.index,
        dur: 1000,
        from: -pathLength + 'px',
        to:  '0px',
        easing: Chartist.Svg.Easing.easeOutQuint,
        // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
        fill: 'freeze'
      }
    };
    // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
    if(data.index !== 0) {
      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
    }
    // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
    data.element.attr({
      'stroke-dashoffset': -pathLength + 'px'
    });
    // We can't use guided mode as the animations need to rely on setting begin manually
    // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
    data.element.animate(animationDefinition, false);
  }
});
// ** END CHARTIST DONUT CHART ** //

HTML:

<div class="ct-chart ct-perfect-fourth"></div>
14
Crystal O'Mara

Also habe ich es herausgefunden ... 

Ich musste in CSS gehen und die Standardeinstellungen überschreiben. Ich musste sicherstellen, dass die CSS-Datei nach dem CDN für Chartist geladen wurde. Stellen Sie dann einfach Breite und Höhe des CT-Diagramms ein.

.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut {
    stroke: #0CC162;
}
.ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
    stroke: #BBBBBB;
}
.ct-chart {
    margin: auto;
    width: 300px;
    height: 300px;
}

Dann musste ich dem Diagrammobjekt den donutWidth-Schlüssel hinzufügen, um die Strichbreite einzustellen:

var chart = new Chartist.Pie('.ct-chart', {
  series: [7, 3],
  labels: [1, 2]
}, {
  donut: true,
  donutWidth: 42,
  showLabel: false
});
15
Crystal O'Mara

Etwas später hier, aber Sie können der Datenreihe Klassennamen zuweisen, damit Sie die Farben in jedem Diagramm unabhängig voneinander ändern können:

Aus den Dokumenten:

Die series-Eigenschaft kann auch ein Array von Wertobjekten sein, die .__ enthalten. eine value -Eigenschaft und eine className -Eigenschaft zum Überschreiben der CSS-Klasse Name für die Seriengruppe.

Anstatt:

series: [70, 30]

Mach das:

series: [{value: 70, className: 'foo'}, {value: 30, className: 'bar'}]

und dann können Sie mit der stroke css -Eigenschaft beliebig gestalten

6
Jeremy Thomas

Chartist ist darauf angewiesen, CSS zu ändern, um die Farben, Größen usw. der Diagramme zu steuern ... Ich würde empfehlen, die Dokumentation hier anzusehen, um viele coole Tipps und Tricks zu lernen: https: //gionkunz.github .io/chartist-js/getting-started.html

Aber zu Ihrer spezifischen Frage, hier ist ein Ausnahme von dem obigen Link, der Ihnen sagt, wie Sie das Donut-Diagramm steuern können:

/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
.ct-series-a .ct-slice-donut {
  /* give the donut slice a custom colour */
  stroke: blue;
  /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
  stroke-width: 5px !important;
  /* create modern looking rounded donut charts */
  stroke-linecap: round;
}
6
Ageonix

Ich habe es geschafft, die Strichfarbe durch Überschreiben dieser Klasse zu ändern. Sie können ct-series-b ändern, in welches Balkendiagramm Sie die Farbe ändern (ct-series-a, ct-series-b usw.).

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.css" />
    <style>
        .ct-series-b .ct-bar, .ct-series-b .ct-line, .ct-series-b .ct-point, .ct-series-b .ct-slice-donut {
             stroke: goldenrod;
        }
    </style>
  </head>
  <body>
    <div class="ct-chart ct-perfect-fourth"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartist/0.10.1/chartist.min.js"></script>
    <script>
      window.onload = function() {
        var data = {
          labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          series: [
            [5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
            [3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
          ]
        };

        var options = {
          seriesBarDistance: 10
        };

        var responsiveOptions = [
          ['screen and (max-width: 640px)', {
            seriesBarDistance: 5,
            axisX: {
              labelInterpolationFnc: function (value) {
                return value[0];
              }
            }
          }]
        ];

        new Chartist.Bar('.ct-chart', data, options, responsiveOptions);
      }
    </script>
  </body>
</html>

2
Felix II Rigor

Dieser Code funktionierte für mich, um die Farbe des Strichs zu ändern:

// Prepare chart params
var chartColors = ['orange'];
var chartWidth = 9;
var percent = 77;
var arc = percent ? 360 * percent / 100 : 0;

// Create chart
var chart = new Chartist.Pie('.my-donut', {
  series: [arc],
  labels: [percent + '%'],
}, {
  donut: true,
  donutWidth: chartWidth,
  startAngle: 0,
  total: 360,
});

// Set chart color
chart.on('draw', function(data) {
  if(data.type === 'slice') {
    if (chartColors[data.index]) {
      data.element._node.setAttribute('style','stroke: ' + chartColors[data.index] + '; stroke-width: ' + chartWidth + 'px');
    }
  }
});

0
Somerussian

Die obigen Antworten funktionieren nicht für mich, da ich Kategorien mit 0 Punkten dynamisch ausschließe. Sie können es jedoch pragmatisch machen. Sie können den SVG-Knoten direkt ändern. In meinen Diagrammen wird "Füllen" anstelle von "Strich" verwendet. Die Methode sollte jedoch dieselbe sein. Das hat für mich in Chrome funktioniert:

const data = {
    series: [],
    labels: []
};
const pieColors = [];

enrollment.CoverageLevelTotals.forEach(e => {
    if (e.Total === 0) return;
    data.series.Push(e.Total);
    data.labels.Push(e.Total);
    pieColors.Push(colors[e.CoverageLevel]);
});

new Chartist.Pie(document.getElementById(canvasId), data,
    {
        width: '160px',
        height: '160px',
        donut: true,
        donutWidth: 50,
        donutSolid: true,
        showLabel: (data.series.length > 1)
    }).on('draw',function (data) {
        if (data.type !== 'slice') return;
        data.element._node.setAttribute('style','fill:' + pieColors[data.index]);
    });

}

0
Mark Miller