web-dev-qa-db-ja.com

Chartist.jsを使用して、ドーナツチャートのストロークの色をどのように変更しますか？

こんにちは、Charist.jsを使用して次のドーナツグラフを作成しようとしています。

目標表

現在、チャートは次のようになっています。

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>
javascriptjquerychartsdonut-chartchartist.js
15
Crystal O'Mara

だから私はそれを理解しました...

私は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
});
19
Crystal O'Mara

ここから少し後ですが、データ系列にクラス名を指定して、各グラフの色を個別に変更できます。

ドキュメントから：

Seriesプロパティは、値プロパティとclassNameプロパティを含む値オブジェクトの配列で、シリーズグループのCSSクラス名をオーバーライドすることもできます。

代わりに：

series: [70, 30]

これを行う：

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

stroke cssプロパティを使用してスタイルを設定できます

7
Jeremy Thomas

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

このクラスをオーバーライドして、ストロークの色を変更することができました。棒グラフを変更する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>
2
Felix II Rigor

このコードは、ストロークの色を変更するのに役立ちました：

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

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

}

0
Mark Miller