我正在尝试使用 chartist 为条形图创建图例,我已经使用 chartist 插件作为图例,但我无法将其与图表底部对齐,任何人都可以提供有关如何自定义 . (我试过在 css 中使用它,但无法反射(reflect)我的更改。)
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;
}
提前致谢。
最佳答案
它真的很简单,但是文档很少。
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);
这将在包含图表的元素之后插入图例。
快乐编码。
关于javascript - 使用图表师在条形图中的图例对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35756217/