visualization - Chartistに軸タイトルを追加する方法

Question

ブラウザの視覚化にChartistを使用しています。

ここでの要件は、X 軸と Y 軸にタイトルを追加して、視聴者が各軸が何を表しているかを理解できるようにすることです。ただし、Chartist のオンライン ドキュメントを調べたところ、これに関するドキュメントは見つかりませんでした。それとも、この機能は Chartist ではサポートされていませんか? サポートされていない場合、これを解決する方法はありますか?

Answer 1

Alex Stanbury によって開発された Axis Title Pluginをダウンロードして使用できます。これは、既存のチャート オプションに追加する必要があるコードです。

plugins: [
 Chartist.plugins.ctAxisTitle({
    axisX: {
       axisTitle: 'X title',
       axisClass: 'ct-axis-title',
       offset: {
          x: 0,
          y: 50
       },
       textAnchor: 'middle'
    },
    axisY: {
       axisTitle: 'Y title',
       axisClass: 'ct-axis-title',
       offset: {
          x: 0,
          y: 0
       },
       textAnchor: 'middle',
       flipTitle: false
     }
   })
 ]

Answer 2

これにはcssを使用しました。これが役立つかどうか試してください。

HTML: <div id="chartist" class="chartist" data-x-axis="X axis label" data-y-axis="Y axis label"></div>

CSS:

[data-x-axis]::before {
    content: attr(data-x-axis);
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: 0;
    font-size: 11px;
    color: #777;
}

[data-y-axis]::after {
    content: attr(data-y-axis);
    position: absolute;
    top: 50%;
    left: -20px;
    font-size: 11px;
    color: #777;
    text-align: center;
    transform: rotate(-90deg)translateY(50%);
}

Answer 3

タイトルは現在 (2015 年 6 月) サポートされていません。

この問題は、Chartist の作成者が Chartist の外部でグラフにラベルを付けることを望んでいることを示唆していますが、HTML にはこれを行う方法が含まれていますが、いくつかの注意事項があります。