在Dygraphs中组合scatter和customBars

时间:2017-04-18 09:40:15

标签: javascript dygraphs scatter errorbar

我试图用2系列一种类型构建一个dygraphs:散布另一种类型:errorBars但似乎它只能显示一个:

这是我的代码:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" src="dygraph.css" />
</head>
<body>

<div id="container" style="width:1000px; height:600px;"></div>
<script type="text/javascript">

new Dygraph(
document.getElementById("container"),
    [
        [new Date("2016/2/3"), [1,3,6], [4]],
        [new Date("2016/3/3"), [1,3,6], [3]],
        [new Date("2016/4/3"), [1,3,6], [1]],
        [new Date("2016/5/3"), [1,3,6], [2]],
        [new Date("2016/6/3"), [1,3,6], [6]],
        [new Date("2016/7/3"), [1,3,6], [5]]
    ],
{
    labels: [ "Date", "SD" , "Scatter"],
    showRangeSelector: true,
    customBars: true,
    drawPoints: true,
    series: {
        "SD" : {

        },
        "Scatter" : {
            customBars: false,
            strokeWidth: 0.0
        }
    },
    includeZero: true

}
);
</script>
</body>
</html>

如果注释掉了customBars,它会显示散点图。 如果没有,它会显示自定义栏。从来没有。 这是picture

这是JSfiddle

任何帮助将不胜感激!! 谢谢!

1 个答案:

答案 0 :(得分:2)

我不确定是否可以将自定义栏图与非自定义栏图混合使用。但我找到了问题的下一个解决方案。如果没有自定义栏作为没有自定义栏区域的自定义栏,为什么不创建所需的图表。下面我给你解决方案。

我希望这可以成为您的解决方案;)

new Dygraph(
    document.getElementById("container"),
	[
	    [new Date("2016/2/3"), [1,3,6], [4,4,4]],
	    [new Date("2016/3/3"), [1,3,6], [3,3,3]],
	    [new Date("2016/4/3"), [1,3,6], [1,1,1]],
	    [new Date("2016/5/3"), [1,3,6], [2,2,2]],
	    [new Date("2016/6/3"), [1,3,6], [6,6,6]],
	    [new Date("2016/7/3"), [1,3,6], [5,5,5]]
	],
	{
       labels: [ "Date", "SD" , "Scatter"],
       showRangeSelector: true,
       customBars: true,
       drawPoints: true,
          
			series: {
				"SD" : {
					
				},
				"Scatter" : {
					strokeWidth: 1
				}
			},
			includeZero: true
			
		}
	);
<link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.js"></script>
<div id="container" style="width:1000px; height:600px;"></div>