Mit Chartist.js, wie änderst du die Farbe des Strichs für ein Donut-Diagramm?

Question

Hallo Ich versuche, das folgende Ringdiagramm mit Chartist.js zu erstellen:

Chartist.js Donut Chart

Ich versuche, wo sie zu finden: wie zur Zeit

GOAL CHART

Dies ist, was das Diagramm sieht oder wie ich die Farben dieses Diagramms ändern kann, um dem 1. Donutdiagramm zu entsprechen. Das Rot und Pink scheinen die Standardwerte zu sein. Ich konnte keine Dokumentation darüber finden, wie dieses Ziel erreicht werden 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> 

Answer 1

Chartist basiert auf CSS Modifizieren der Farben zu steuern, Größen usw. der Charts. Ich würde vorschlagen, einen Blick auf die Dokumentation hier mit vielen coolen Tipps und Tricks zu lernen: https://gionkunz.github.io/chartist-js/getting-started.html

Aber auf Ihre spezielle Frage, hier ist eine Ausnahme von den obigen Link, der Ihnen sagt, wie das Ringdiagramm steuern:

/* 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; 
} 

Answer 2

Also habe ich es aus ...

ich in css gehen musste und die Standardwerte außer Kraft setzen. Ich musste sicherstellen, dass die CSS-Datei nach der CDN für Chartist geladen wurde. Dann einfach Breite und Höhe des CT-Diagramms einstellen.

.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 hatte ich donutWidth Schlüssel zum Diagrammobjekt, um die Strichbreite hinzuzufügen:

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

Answer 3

Ich habe es geschaffen, zu ändern, um die Strichfarbe durch das Überschreiben dieser Klasse. Sie können ct-series-b ändern, zu welchem ​​Balkendiagramm Sie wechseln, um die Farbe zu ä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>

Answer 4

etwas später hier, aber Sie können Klassennamen der Datenreihe bieten, damit Sie die Farben auf jedem Graphen unabhängig ändern:

Aus der Dokumentation:

Die Serieneigenschaft kann auch ein Array von Wertobjekten sein, dieenthaltenEine Werteigenschaft und eine Klassenname-Eigenschaft, die die CSS-Klasse für die Seriengruppe überschreiben.

Statt:

series: [70, 30] 

tun:

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

und dann können Sie Stil aber Sie möchten, dass mit dem stroke CSS-Eigenschaft