1

Has anyone used a stacked flot chart with the curved lines plugin? They do not appear to be compatible because the curved lines plugin adds an additional data series which adds to the total stack value, basically duplicating each series, creating a striped look and doubling the scale of the Y axis. Does anyone have a solution or workaround?

Here's a jsfiddle. The example on the top shows the stack without curved lines. The example on the bottom shows the problem.

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

2 回答 2

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

查看更新的小提琴

于 2014-05-27T09:46:57.997 回答
1

curveLines 插件的作者解决了我看到的问题。如果您转到上面链接的我原来的 jsfiddle，您会看到它现在按需要工作。（GitHub上的curveLines.js是jsfiddle中的一个外部引用，所以当它更新时，修复会自动集成到fiddle中。）

于 2014-05-31T20:27:57.083 回答