javascript - 使用 Chartist.js 如何更改圆环图的笔触颜色？

Question

您好，我正在尝试使用 Chartist.js 创建以下圆环图：

这是图表目前的样子：

我正在尝试查找在何处或如何更改此图表的颜色以匹配第一个圆环图。红色和粉红色似乎是默认值。我还没有找到任何关于如何实现这个目标的文档。我还想自定义笔画的大小和图表本身的大小。任何帮助是极大的赞赏！

当前代码：

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

score 23 · Accepted Answer

所以我想通了...

我不得不进入 css 并覆盖默认值。我必须确保在 Chartist 的 cdn 之后加载 css 文件。然后只需设置 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;
}

然后我必须将 donutWidth 键添加到图表对象以设置笔划宽度：

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

score 14 · Accepted Answer

稍后在这里，但您可以为数据系列提供类名，以允许您独立更改每个图表上的颜色：

从文档：

series 属性也可以是包含 value 属性和 className 属性的值对象数组，以覆盖系列组的 CSS 类名称。

代替：

series: [70, 30]

做这个：

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

然后您可以使用strokecss 属性设置您喜欢的样式

score 9 · Accepted Answer

Chartist 依靠修改 CSS 来控制图表的颜色、大小等。我建议在这里查看文档以了解许多很酷的提示和技巧： https ://gionkunz.github.io/chartist-js/getting-started.html

但是对于您的具体问题，这是上面链接中的一个例外，它告诉您如何控制圆环图：

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

score 2 · Accepted Answer

我已经设法通过覆盖这个类来改变笔触颜色。您可以将 ct-series-b 更改为要更改颜色的条形图（ct-series-a、ct-series-b 等）。

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

score 1 · Accepted Answer

我为使其工作所做的工作如下。我使用的是条形图，但我想所有图表都是一样的。

我的 CSS

.ct-chart .ct-series.stroke-green .ct-bar {
 stroke: green;
}
.ct-chart .ct-series.stroke-yellow .ct-bar {
 stroke: rgba(255, 167, 38, 0.8);
}
.ct-chart .ct-series.stroke-red .ct-bar {
  stroke: rgba(230, 20, 20, 0.8);
}

图表配置

{
  labels: ['Jan', 'Feb'],
  series: [
    {className:"stroke-green",  meta:"OK", data: [12,23] },
    {className:"stroke-yellow", meta:"Rest", data: [34,34]},
    {className:"stroke-red", meta: "NOK", data: [2, 5] },
  ]
}

score 1 · Accepted Answer

这段代码对我有用，可以改变笔画的颜色：

// 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');
    }
  }
});

score 1 · Accepted Answer

单系列条形图 - 使用nth-child(N)：

.ct-bar:nth-child(1){
    stroke: #379683 !important;
}

.ct-bar:nth-child(2){
    stroke: #91A453 !important;
}

.ct-bar:nth-child(3){
    stroke: #EFB200 !important;
}

score 0 · Accepted Answer

上面的答案对我不起作用，因为我动态排除了 0 分的类别。不过，您可以务实地做到这一点。可以直接修改svg节点。我的图表使用填充而不是描边，但方法应该相同。这在 Chrome 中对我有用：

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

}

javascript - 使用 Chartist.js 如何更改圆环图的笔触颜色？

8 回答 8

Related

Reference