我正在使用React ChartJS构建一个条形图,当前看起来像x1c 0d1x建立在其上的数据是动态的--也就是说,可以有更多(或更少)的行业。我希望固定条形图的宽度(例如,30像素),并根据数据集的数量来增加图表的高度。换句话说,我不关心图表的高度,它应该是数据集的数量的函数。我该如何实现这一点?我想分享我已经得到的代码,但它是相当通用的,可以张贴在这里,如果人们会发现有用的。
6rqinv9w1#
首先,您可以将canvas Package 在div中。
canvas
div
<div id="chartWrapper"> <canvas id="myChart"></canvas> </div>
您可以使用插件核心API,并根据定义的data.barThickness和可见的datasets计算beforeRender挂钩中的图表高度。
data.barThickness
datasets
beforeRender
plugins: [{ beforeRender : chart => { if (!chart.config.options.nonChartAreaHeight) { var yAxis = chart.scales.y; chart.config.options.nonChartAreaHeight = chart.height - (yAxis.bottom - yAxis.top); } const labelCount = chart.data.labels.length; const datasetCount = chart.data.datasets.map((ds, i) => chart.getDatasetMeta(i)).filter(m => !m.hidden).length; const chartAreaHeight = labelCount * datasetCount * chart.data.barThickness * 1.2; document.getElementById("chartWrapper").style.height = (chartAreaHeight + chart.config.options.nonChartAreaHeight) + 'px'; } }],
然后,您还需要定义option.maintainAspectRatio: false,以防止Chart.js调整canvas的大小。请看下面的可运行代码,看看它是如何工作的。第一个
option.maintainAspectRatio: false
Chart.js
1条答案
按热度按时间6rqinv9w1#
首先,您可以将
canvas
Package 在div
中。您可以使用插件核心API,并根据定义的
data.barThickness
和可见的datasets
计算beforeRender
挂钩中的图表高度。然后,您还需要定义
option.maintainAspectRatio: false
,以防止Chart.js
调整canvas
的大小。请看下面的可运行代码,看看它是如何工作的。
第一个