Question

有没有人使用带有曲线插件的堆叠式flot图表？它们似乎不兼容，因为曲线插件添加了额外的数据系列，它增加了总的堆栈值，基本上复制了每个系列，创建了条纹外观并使Y轴的比例加倍。有没有人有解决方案或解决方法？

这是一个jsfiddle。顶部的示例显示没有曲线的堆栈。底部的示例显示了问题。

<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 },}
    });
});

Answer 1

您可以使用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();
                }
            }
});

请参阅更新的fiddle

Answer 2

curvedLines插件的作者解决了我看到的问题。如果您转到上面链接的原始jsfiddle，您将看到它现在正在按预期工作。（GitHub上的curvedLines.js是jsfiddle中的外部引用，所以当它更新时，修复程序会自动集成在小提琴中。）

Flot图表堆叠曲线

2 个答案: