Question

我的图表根据输入过滤器输出动态数据。这些可以有1到30个小节，并且它们会在屏幕调整大小/设备上调整大小。只是一个例子，目前在那里＆＃c;＆lt; 5个条形图和图表宽度是1138px（最大值），然后我的宽度非常大。

问。这个问题如何解决？

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"}
       };

Answer 1

假设您想要为条形图提供相同的像素宽度（无论是1或30条），您可以从图表的宽度计算barWidth的值（以x轴为单位和像素，校正轴）和边距）使用cross-multiplication。 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);

对于具有上述示例值的一个条形，这为barWidth提供了大约0.019。通过改变公式中的常数，您可以修改计算。

jQuery Flot Charts：带动态项的自动条宽

1 个答案: