如何添加烟囱效应，以条形图中jQuery的海军报

起初，我得到了下面的图表 http://design2u.me/blog/example/bar/index.html

的代码如下：

<script type="text/javascript"> 
$(function() { 
    // generate a dataset 
     var d1 = []; d1.push([3,100]); 
     var d2 = []; d2.push([3,66]); 
     var d3 = []; d3.push([3,33]); 

     //announce a dataset 
     var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];  
     var placeholder = $("#placeholder"); 

     // plot it 
     var plot = $.plot(placeholder, data, { 
       stack:true, 
       bars: { show: true, barWidth: 4, fill: 0.5 }, 
       xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10 }, 
       yaxis: { min: 0, max: 120 }, 
     }); 
}); 
</script>

不过，我需要不同的部分就堆叠起来，我已经添加属性

stack:true,

通过尝试和示数，我发现，如果我改变绘图功能如下：

var plot = $.plot(placeholder, data, { 
      series: { 
       stack:true, 
       bars: { show: true, barWidth: 4, fill: 0.5 }, 
       xaxis: { ticks: [], autoscaleMargin: 0.02 , min: 0, max: 10 }, 
       yaxis: { min: 0, max: 120 }, 
      } 
     });

然后我得到了以下结果：http://design2u.me/blog/example/bar/index2.html

条已成功堆栈，但它变得太宽。 ..

我希望酒吧只在中心，我该如何解决这个问题？非常感谢！

来源

2012-03-09 Chi Chieh Peng

嗯，我认为这可能是一个错误。如果每个系列有多个数据点，我认为它会更好。实际上，我可以想出如何做到这一点的唯一方法是添加一条“虚拟”线，以强制x轴成为正确的宽度，并将条留在相同的宽度：

首先，添加新的数据设置为您的数据：

{ 
data: [[0, 0], [10, 0]], 
bars: { 
    show: false 
}, 
lines: { 
    show: false 
}}

的[0,0]是您的x轴分钟，[10,0]是您的y轴分钟。

然后我稍微改变你的剧情选项，让您的来电$.plot是这样的：

var plot = $.plot(placeholder, data, { 
    series: { 
     stack:true, 
     bars: { 
      show: true, 
      barWidth: 1, 
      fill: 0.5, 
      align: 'center' 
     } 
    } 
});

造成这种工作示例：http://jsfiddle.net/ryleyb/92v2h/

来源

2012-03-09 16:36:52 Ryley

它确实有用，谢谢！ – 2012-03-11 15:19:42

我发现了一个简单的方法来解决我的问题。

通过固定以下代码：

//announce a dataset 
     var data = [{ data: d1, color: "#f21d1d" },{ data: d2, color: "#1d61f2" },{ data: d3, color: "#5bc91a" }];

成

//announce a dataset 
     var data = [{ stack: true, data: d1, color: "#f21d1d" },{ stack: true, data: d2, color: "#1d61f2" },{ stack: true, data: d3, color: "#5bc91a" }];

和问题解决。在这项工作中的裁决：http://jsfiddle.net/divaka/q8srK/

感谢您的每一个回复。

来源

2012-03-11 15:19:24

如何添加烟囱效应，以条形图中jQuery的海军报

回答

相关问题