在 Dygraphs 中组合 scatter 和 customBars
Combining scatter and customBars in Dygraphs
我正在尝试构建一个包含 2 个系列的 dygraphs,一种类型:scatter 另一种类型: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
任何帮助将不胜感激!!
谢谢!
我不确定是否可以将自定义条形图与非自定义条形图混合使用。但是我已经找到了解决您问题的下一个方法。为什么不创建没有自定义栏的图形作为没有自定义栏区域的自定义栏。下面我把我的解决方法留给你。
我希望这能成为您的解决方案 ;)
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>
我正在尝试构建一个包含 2 个系列的 dygraphs,一种类型:scatter 另一种类型: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
任何帮助将不胜感激!! 谢谢!
我不确定是否可以将自定义条形图与非自定义条形图混合使用。但是我已经找到了解决您问题的下一个方法。为什么不创建没有自定义栏的图形作为没有自定义栏区域的自定义栏。下面我把我的解决方法留给你。
我希望这能成为您的解决方案 ;)
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>