3

chartist を使用して棒グラフの凡例を作成しようとしています。凡例に chartist プラグインを使用しましたが、グラフの下部に揃えることができません。（cssで使ってみましたが、変更を反映できませんでした。）

HTML :

<chartist class="ct-chart ct-major-twelfth"
    chartist-chart-type="Bar"
    chartist-data="chartData"
    chartist-chart-options="chartOptions">
</chartist>

JS:

chartData = {
    labels: [],
    series: [[]]
};

chartOptions= {
    plugins: [
        Chartist.plugins.legend()
    ]
};

伝説.JS:

 $ct-series-colors: (#d70206, #F05B4F, #F4C63D, #453D3F) !default;

.ct-legend {
    position: relative;
    z-index: 10;

    li {
        position: relative;
        padding-left: 23px;
        margin-bottom: 3px;
    }

    li:before {
        width: 12px;
        height: 12px;
        position: absolute;
        left: 0;
        content: '';
        border: 3px solid transparent;
        border-radius: 2px;
    }

    li.inactive:before {
        background: transparent;
    }

    &.ct-legend-inside {
        position: absolute;
        top: 0;
        right: 0;
    }

    @for $i from 0 to length($ct-series-colors) {
        .ct-series-#{$i}:before {
            background-color: nth($ct-series-colors, $i + 1);
            border-color: nth($ct-series-colors, $i + 1);
        }
    }
}

また、バーの上に y 軸の値を追加する方法を教えてください。以下の css ファイルを使用してみましたが、ラベルを取得できません (Chartist.plugins.ctPointLabels に似ています) が、折れ線グラフにのみ適用できるようです。

CSS:

.ct-chart .ct-bar {
  stroke-width: 60px;
}

.ct-chart .ct-label, .ct-chart .ct-label.ct-horizontal {
  text-align: center;
}

.ct-bar-label {
  text-anchor: middle;
  alignment-baseline: hanging;
  fill: white;
}

前もって感謝します。

4

1 に答える 1

5

それは本当に単純ですが、ドキュメントが不十分です。

Chartist.plugins.legend({
   position: 'bottom'
});

チャート SVG はその親に対して絶対に配置されることに注意してください。したがって、CSS は絶対位置も設定する必要があります。

より徹底的なアプローチについては、chart.on('created', ...)

chart.on('created', function (data) {
    // Append the legend element to the DOM
    switch (options.position) {
        case 'top':
            chart.container.insertBefore(legendElement, chart.container.childNodes[0]);
            break;

        case 'bottom':
            chart.container.parentNode.insertBefore(legendElement, null);
            break;
    }
});

キーは次のとおりです。

chart.container.parentNode.insertBefore(legendElement, null);

チャートが含まれている要素の後に凡例を挿入します。

ハッピーコーディング。

于 2016-09-16T20:28:04.937 に答える