Jquery Flot图叠加曲线

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

有人使用过带曲线插件的堆叠flot图表吗?它们看起来不兼容,因为Curve lines插件添加了一个额外的数据系列,该系列增加了堆栈的总值,基本上复制了每个系列,创建了条纹外观,并将Y轴的比例增加了一倍。有人有解决方案或变通方法吗

这是一个例子。顶部的示例显示了没有曲线的堆栈。下面的例子说明了问题所在

<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
标记干净。