23

こんにちは、Chartist.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>
4

8 に答える 8

23

それで思いついた...

私は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
});
于 2016-02-15T07:06:58.193 に答える
1

それを機能させるために私がしたことは次のとおりです。私は棒グラフを使用していますが、すべてのグラフで同じだと思います。

私の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] },
  ]
}
于 2020-09-04T17:20:00.630 に答える