2
我正在嘗試爲圖表創建使用圖表專家的圖例,我使用圖表插件作爲圖例,但我無法將其對齊到圖表底部,任何人都可以提供輸入關於如何定製。 (我已經在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()
]
};
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);
}
}
}
也任何人都可以讓我知道如何在bars.y上面添加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;
}
在此先感謝。
你有沒有找到你要找的東西,我有同樣的需求。 – wilfriedrt
我也在尋找這個 –