在小尺寸div容器中绘制jqPlot条形图

Question

我想绘制一个简单的jqplot条形图。

但图表必须是固定大小，非常小 [70x50像素] 。

我正在绘制div中的图表，并且由于指定的项目要求，div有一个固定的css，我无法更改。

以下是正在应用的CSS

.task_brk_bar_chart {
    width:10%;
    float:left;
    border: 2px solid red;
    padding:10px 30px 10px 15px;
}

当我在如此小的区域绘制图表时，它会被搞砸而无法查看

我创造了一个显示相同的小提琴

https://jsfiddle.net/ce82natg/

那么如何在如此小的区域内绘制条形图？

我不需要传说x / y轴只是条形图， 任何帮助表示赞赏

Answer 1

我不是百分百确定这是否是您正在寻找的，但我认为这就是您的问题：

您需要指定容器的高度

.task_brk_bar_chart {
   width:10%;
   float:left;
   border: 2px solid red;
   padding:10px 30px 10px 15px;
   height: 70px;

}

另外我会隐藏标签

.jqplot-xaxis-tick{ display: none}

容器中的填充，我们应该0来查看您正在寻找的结果。

padding:0;

并更改jqPlot选项中的以下参数

barWidth: 10,

我希望有帮助