Jquery Flot图叠加曲线
有人使用过带曲线插件的堆叠flot图表吗?它们看起来不兼容,因为Curve lines插件添加了一个额外的数据系列,该系列增加了堆栈的总值,基本上复制了每个系列,创建了条纹外观,并将Y轴的比例增加了一倍。有人有解决方案或变通方法吗 这是一个例子。顶部的示例显示了没有曲线的堆栈。下面的例子说明了问题所在Jquery Flot图叠加曲线,jquery,flot,bezier,stacked-area-chart,Jquery,Flot,Bezier,Stacked Area Chart,有人使用过带曲线插件的堆叠flot图表吗?它们看起来不兼容,因为Curve lines插件添加了一个额外的数据系列,该系列增加了堆栈的总值,基本上复制了每个系列,创建了条纹外观,并将Y轴的比例增加了一倍。有人有解决方案或变通方法吗 这是一个例子。顶部的示例显示了没有曲线的堆栈。下面的例子说明了问题所在 <div class="demo-container"> <div id="placeholder" style="height: 200px; width: 400px
<div class="demo-container">
<div id="placeholder" style="height: 200px; width: 400px;" class="demo-placeholder"></div>
<div id="placeholder2" style="height: 200px; width: 400px;" class="demo-placeholder"></div>
</div>
$(function() {
var d1 = [];
for (var i = 0; i <= 10; i += 1) {
d1.push([i, parseInt(Math.random() * 30)]);}
var d2 = [];
for (var i = 0; i <= 10; i += 1) {
d2.push([i, parseInt(Math.random() * 30)]);}
var d3 = [];
for (var i = 0; i <= 10; i += 1) {
d3.push([i, parseInt(Math.random() * 30)]);}
$.plot("#placeholder", [ d1, d2, d3 ], {
series: { stack: true,
lines: {show: true, fill: true, }, }
});
$.plot("#placeholder2", [ d1, d2, d3 ], {
series: { stack: true,
lines: {show: true, fill: true, },
curvedLines: { active: true, fit: true, apply: true },}
});
});
$(函数(){
var d1=[];
对于(var i=0;i您可以使用tickformatter
选项以您喜欢的任何方式自定义y轴。
例如,如果值加倍,则可以输出y轴标签除以2
$.plot("#placeholder2", [ d1, d2, d3 ], {
series: { stack: true,
lines: {show: true, fill: true, },
curvedLines: { active: true, fit: true, apply: true },},
yaxis:{
tickFormatter: function(val, axis){
return (val/2).toFixed();
}
}
});
请参阅更新的curvedLines插件的作者修复了我所看到的问题。如果您转到上面链接的我的原始JSFIDLE,您将看到它现在可以按需要工作。(GitHub上的curvedLines.js是JSFIDLE中的外部引用,因此当它更新时,修复程序会自动集成到FIDLE中。)Nice hack^^^只要你不使用工具提示或类似的方式显示值,这可能就行了。但填充样式不太好。谢谢你的帮助。我可以看到这可能也解决了它。不过,CurvedLines插件提交者修复了GitHub上的问题,并且包含了资源,因此JSFIDLE更新了自动使用修复程序,现在您的修复程序似乎将y轴比例减半。因此,如果我正确阅读了您下面的评论,曲线插件的维护者解决了这个问题?您能用这些信息回答您自己的问题,然后接受它吗?尝试保持flot
标记干净。