jQuery浮动图表:自动宽度与动态项目

jQuery Flot Charts: Auto bar width with dynamic items

本文关键字：动态 项目 jQuery      更新时间：2023-09-26

我的图表根据输入过滤器输出动态数据。这些可以有1到30条，它们可以根据屏幕大小/设备调整大小。举个例子，现在有<5条线，图表宽度为1138px (max)，然后我有一个相当大的宽度条。

Q。这个问题是如何处理的?

var options = {
          xaxis: { ticks: ticks},
          grid: { clickable: false, hoverable: true },
          series: { stack: true, bars: {show: true,align: 'center',barWidth: 0.5,lineWidth: 2,fillColor: {colors: [{opacity: 0.9}, {opacity: 0.9}]}} },
          legend: {container: ".widget-legend"}
       };

假设无论有1条还是30条，您都希望给您的条形图提供相同的像素宽度，您可以使用交叉乘法从图表的宽度(以x轴单位和像素为单位，校正轴和边距)计算barWidth的值。在1100像素上最多30条像素的合理像素宽度约为每条20像素。

var chartWidthInPixels = 1100 * 0.95; // or $('#chart').width() * 0.95
var barWidthInPixels = 20; // or chartWidthInPixels / 50
var chartWidthInAxisUnits = (max(ticks) - min(ticks)) + 1; // this will be 1 for one bar
var barWidthInAxisUnits = barWidthInPixels * (chartWidthInAxisUnits / chartWidthInPixels);

对于具有上述示例值的一个bar, barWidth的值约为0.019。通过改变公式中的常量，您可以修改计算。

相关文章：