4

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

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

4

3 回答 3

5

您可以下载并使用 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
     }
   })
 ]
于 2015-08-22T08:09:07.100 回答
3

我为此使用了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%);
}
于 2015-10-24T10:39:43.340 回答
0

目前（2015 年 6 月）不支持标题。

这个问题表明 Chartist 作者希望您在 Chartist 之外标记图表，但确实包含一种在您的 HTML 中执行此操作的方法，尽管有一些值得注意的警告。

于 2015-06-26T14:43:37.627 回答