ChartJS，条形图标签中的多行
真力时
我正在使用ChartJS库在PHP项目中绘制图表。在条形图中，我希望X轴上的标签成两行。
怎么了
我当前的图表就像
我希望我的图表如下
这是我的代码片段
<?php
$array_data = sql::rows("attendance_summary_report","DateVal between
'{$previous_date}' and '{$last_date}' order by DateVal asc");
//print_r($array_data);
$level_array=array();
$pre_array=array();
$abs_array=array();
if(is_array($array_data) && count($array_data)>0){
foreach($array_data as $ad){
if($ad['DayVal']==''){
$ad['DayVal']='No Day';
$ad['present']=0;
$ad['absent']=0;
}
array_push($level_array,
$ad['DayVal']."\n".date('d/m',strtotime($ad['DateVal'])));
array_push($pre_array,$ad['present']);
array_push($abs_array,$ad['absent']);
}
}
?>
<script>
$(function () {
var areaChartData = {
labels : <?php echo json_encode($level_array,true)?>,
datasets: [......]
}
var barChartCanvas = $('#barChart').get(0).getContext('2d')
var barChartData = jQuery.extend(true, {}, areaChartData)
var temp0 = areaChartData.datasets[0]
var temp1 = areaChartData.datasets[1]
barChartData.datasets[0] = temp1
barChartData.datasets[1] = temp0
var barChart = new Chart(barChartCanvas, {
type: 'bar',
data: barChartData,
options: barChartOptions
})
}
</script> 兴奋剂
这可以通过将标签作为字符串数组传递来实现，其中每个元素代表一行，例如：
let labels = [
'A', // normal label.
['First line', 'Second line', '...'] // multi-line label.
];
一个工作示例：
new Chart(document.getElementById("chart"), {
type: 'bar',
data: {
labels: ['A', ['Water', 'Heating'], 'C'],
datasets: [{
data: [1, 1, 1]
}]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="chart"></canvas>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
SSRS堆叠条形图标签位置
- 2
ASP.NET条形图标签
- 3
MPAndroidChart添加并显示条形图标签
- 4
R：水平条形图标签
- 5
条形图标签顺序错误
- 6
R：条形图标签的颜色不同
- 7
ASP.NET条形图标签
- 8
r中的条形图标签：使用text（）显示旋转标签的问题
- 9
R中的条形图标签：在绘图区域下方添加水平线
- 10
如何在python中按字母顺序绘制条形图标签？
- 11
堆积条形图标签-D3
- 12
NVD3水平条形图标签太长
- 13
条形图标签的位置和文本长度
- 14
如何自定义条形图标签？
- 15
如何自动化垂直条形图标签？
- 16
堆积条形图标签-D3
- 17
订购刻面条形图标签ggplot2
- 18
来自数据框列的条形图/饼图标签
- 19
d3.js 条形图标签条
- 20
kendo ui - 条形图标签位置根据条件分配
- 21
如何在饼图和条形图标签中显示当前值，例如在工具提示中？
- 22
ChartJs堆积条形图
- 23
Google条形图标签动态数据。如何添加标签？
- 24
如何在matplotlib中获取条形图/堆叠条形图上的标签？
- 25
chartjs-plugin-error-bars在水平条形图上显示错误栏而不显示标签
- 26
ChartJS 和 VueJS 中条形图中每个条形的不同颜色
- 27
如何在条形图中制作多行数据标签？
- 28
如何居中堆叠百分比条形图标签居中
- 29
D3.js旋转垂直条形图标签
我来说两句