javascript - 在 Dygraphs 中组合 scatter 和 customBars-6ren

javascript - 在 Dygraphs 中组合 scatter 和 customBars

转载作者：行者123 更新时间：2023-11-30 15:22:37

27

4

我正在尝试用 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

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

最佳答案

我不确定是否可以将自定义条形图与非自定义条形图混合使用。但是我已经找到了解决您问题的下一个方法。为什么不创建没有自定义栏的图形作为没有自定义栏区域的自定义栏。下面我给你留下我的解决方案。

我希望这能成为您的解决方案；)

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>

关于javascript - 在 Dygraphs 中组合 scatter 和 customBars，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43468668/

27

4

0

文章推荐： javascript - Woocommerce 3.x 图像交换 "On Hover"大拇指

文章推荐： c - 如何在 C 中释放树时找出导致内存泄漏的原因

文章推荐： c - 结构复制到字节数组中..对齐错误？

文章推荐： javascript - 一个项目中的 Coffeescript 和 es6 - 实践中的迁移

python - pyplot.scatter(dataframe) 与 dataframe.plot(kind ='scatter' )
我有几个 pandas 数据框。我想在单独的散点图中相互绘制几列，并将它们组合为图中的子图。我想相应地标记每个子图。我在让子图标签正常工作方面遇到了很多麻烦，直到我发现据我所知，有两种直接从数据帧进行
broadcast - Dask Scatter 广播列表
使用 Dask 分布式分散广播列表的合适方法是什么？案例 1 - 包装列表: [future_list] = client.scatter([my_list], broadcast=True) 情况
broadcast - Dask Scatter 广播列表
使用 Dask 分布式分散广播列表的合适方法是什么？案例 1 - 包装列表: [future_list] = client.scatter([my_list], broadcast=True) 情况
python - plt.scatter 列表中的二维数组元素
我有一个包含数组元素的列表: [array([2.40460915, 0.85513601]), array([1.80998096, 0.97406986]), array([2.14505475,
Python matplotlib scatter - 一个散布中的不同标记
我想显示一些点。这是我的代码: plt.scatter(y[:,0],y[:,1],c=col) plt.show() 并作为 col我有: Col: [1 1 0 1 1 1 1 0 0 0 1
python - pylab.scatter 创建带有奇怪白线的颜色条
当我在 OSX Yosemite 上运行它时，生成的颜色条有奇怪的白线(见下图)。有什么方法可以生成没有这些难看的线条的颜色条吗？ import pylab import numpy x = nump
python - ax.scatter() 语法无效？
我已成功绘制了两个图表，但当我绘制第三个图表时，出现无效语法错误。我是否遗漏了一些非常明显的东西？ x=df['time'] d=df['dist'] x2=df2['time'] d2=df2['d
c++ - mpi All-to-All Scatter/Gather的高效实现
我的每个进程都有一个值数组 v 和一个大小相同的进程 ID pid 数组。 pid[i] 指定要将项目 v[i] 发送到哪个进程。我需要实现一个分散操作(当然还有相应的聚集操作)。进程 ID 数组
带有间隙的 iOS Scatter 核心图
如何使用核心图绘制有间隙的散点图？我正在使用核心绘图库。一切正常，但现在我想在数据线的开头或中间做一个有间隙的散点图？有人帮我吗？最佳答案让数据源返回nil 或[NSNull null]。例如，如
python - pyplot.scatter 改变轴的数据范围
我有一些代码可以绘制一些点。我将 ax.scatter 替换为 ax.plot，这样我就可以单独控制每个点的颜色。但是，当我进行此更改时，x 轴和 y 轴的范围似乎会增加。我无法确定为什么会这样。我
python - 如何使用带有日期的 plotly graph_objects scatter
从我复制到自己服务器的已知公共(public)数据集开始。数据集在这里:https://www.kaggle.com/imdevskp/corona-virus-report/download im
scatter-plot - 如何使用 Bokeh 悬停工具显示自定义索引？
我正在使用 Bokeh 将 ~700 次模拟的结果与使用散点图的另一组结果进行对比。我想使用悬停工具通过分配标识模拟参数的自定义索引来定性地确定数据中的模式。在下面的代码中，x和 y是来自 Pand
matplotlib - 在 plt.scatter 中绘制空心圆
这个问题在这里已经有了答案: matplotlib scatter edge without specifying edgecolor (1 个回答) 3年前关闭。我想通过使用 2 个索引 [Chi
java - 了解 Scatter Gather 的企业集成？
我希望更好地理解流行的 EIP 分散聚集中的多个分离器、转换器和聚合方法。用例是我发送一些可以对应于多种不同类型的 XML。我想分割 header 中指定的类型(每种类型不同)并通过与每种类型对应的
r - ggplot : Scatter plot, 标签和图例
考虑以下示例(取自 Stackoverflow 上的另一篇文章): require(ggplot2) d <- data.frame(x = c(102856,17906,89697,74384,91
python - 如何向量化 scatter-matmul 运算
我有许多带有形状的矩阵 w1、w2、w3...wn (k*n1 、k*n2、k*n3...k*nn) 和 x1、x2、x3...xn 具有形状(n1*m、n2*m、n3*m...nn*m >). 我想
python - 设置与 pyplot.scatter 中的颜色匹配的图例
假设我的数据按以下方式组织: x_values = [6.2, 3.6, 7.3, 3.2, 2.7] y_values = [1.5, 3.2, 5.4, 3.1, 2.8] colours = [
java - 如何正确使用 Scatter-Gather 模式？
我对 Spring Integration 还是很陌生，我尝试使用 IntetrationFlowDefinition.scatterGather() 但无济于事。总体思路是: 将一个String作为
javascript - 在 google scatter 中创建自定义信息窗口
我有一个谷歌分散图，我希望当鼠标悬停在圆圈上时，然后打开一个包含自定义字符串的信息窗口。例如教程 https://developers.google.com/chart/interactive/do
java - 具有多个 "scatter lines"的散点图
好吧，我了解 JFreeChart 和其他人，但我正在编写自己的简单散点图。我已经有了一个箱形图(没有 y 轴标签，但当我在报告中解释它时，这不应该是一个大问题)。我有一个基本的散点图类，但是我尝试

首页

博学

6Ren·AI

商城

javascript - 在 Dygraphs 中组合 scatter 和 customBars