Sử dụng Chartist.js làm thế nào để bạn thay đổi màu sắc của nét vẽ cho biểu đồ bánh rán?

Question

Xin chào Tôi cố gắng để tạo ra các biểu đồ bánh rán sau đây sử dụng Chartist.js:

GOAL CHART

Đây là những gì biểu đồ trông giống như hiện nay:

Chartist.js Donut Chart

Tôi cố gắng để tìm nơi hoặc làm thế nào tôi có thể thay đổi màu sắc của biểu đồ này để phù hợp với biểu đồ bánh rán thứ nhất. Màu đỏ và màu hồng dường như là mặc định. Tôi đã không thể tìm thấy bất kỳ tài liệu hướng dẫn nào về cách hoàn thành mục tiêu này. Tôi cũng muốn tùy chỉnh kích thước của nét vẽ và kích thước của biểu đồ. Bất kỳ trợ giúp nào cũng được đánh giá rất cao!

đang hiện tại:

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

người vận động dựa trên sửa đổi CSS để kiểm soát màu sắc, kích thước, vv của các bảng xếp hạng. tôi muốn đề nghị có một cái nhìn tại các tài liệu đây để tìm hiểu rất nhiều lời khuyên tuyệt vời và thủ thuật: https://gionkunz.github.io/chartist-js/getting-started.html

Nhưng cho câu hỏi cụ thể của bạn, đây là một ngoại trừ từ liên kết ở trên cho bạn biết làm thế nào để kiểm soát biểu đồ bánh rán:

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

Vì vậy, tôi figured it out ...

tôi phải đi vào css và ghi đè giá trị mặc định. Tôi phải đảm bảo rằng tệp css đã được tải sau cdn cho Chartist. Sau đó, chỉ cần thiết lập chiều rộng và chiều cao của ct-chart.

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

Sau đó, tôi đã phải thêm khóa donutWidth đến đối tượng biểu đồ để thiết lập chiều rộng đột quỵ:

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

Answer 3

tôi đã quản lý để thay đổi màu sắc đột quỵ bằng cách ghi đè lớp này. Bạn có thể thay đổi ct-series-b thành biểu đồ thanh bạn thay đổi để thay đổi màu (ct-series-a, ct-series-b và v.v.).

<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

Một chút sau đây, nhưng bạn có thể cung cấp tên lớp với hàng loạt dữ liệu để cho phép bạn thay đổi màu sắc trên mỗi đồ thị một cách độc lập:

Từ các tài liệu:

Thuộc tính chuỗi cũng có thể là một mảng đối tượng có giá trị chứa thuộc tính giá trị và thuộc tính className để ghi đè tên lớp CSS cho nhóm chuỗi.

Thay vì:

series: [70, 30] 

Làm điều này:

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

và sau đó bạn có thể tạo kiểu tuy nhiên bạn muốn với tài sản stroke css