Question

我使用Chartist进行浏览器可视化。

这里的要求是我需要在X轴和Y轴上添加标题，以便观众知道每个轴代表什么。但是我浏览了Chartist的在线文档，但没有找到关于此的文档。我错过了什么，或者Chartist不支持此功能？如果它不受支持，有没有办法解决这个问题？

Answer 1

您可以download使用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月）不受支持。

issue for this表明Chartist作者希望您在Chartist之外标记图形，但确实包含了在HTML中执行此操作的方法，但有一些值得注意的警告。

如何在Chartist中添加轴标题

3 个答案: