设置选项对象关键点:值对以实现带第二个y轴的动态打印
Setting options object key: value pairs to achieve dynamic plotting w/2nd y-axis
我需要在绘图中添加第二个轴。我们经常绘制温度(300-700华氏度)与储罐液位(15000-30000加仑)的关系图,因此两个不同刻度的两轴就很好了。
现在,我确实阅读了说明书和示例&我知道如何设置第二轴。如果它是静态的(即,我硬编码标签名/列名),那么一切都很好。如果它是动态的,我就做不到。因为用户从1000多个标签的Jquery自动完成中进行选择,所以它需要适用于任何标签。我读过关于"选项对象"的文章;这似乎是我需要使用的,但当我试图遵循dyGraphs第二个Y轴时,我的代码中断了,当使用变量';y2';这是我能找到的最接近的代码。
这段代码可以工作(使用文字),但我不知道如何更改"LE505 R505 Receiver Level"的两次出现的内容。我需要将其设置为Javascript变量"tagselected2"的值。
我应该补充一点,我不确定是否需要用搜索报价
"rarray"是通过XMLHTTP请求从ASP页面加载的。ASP页面查询mySQL服务器,返回的结果包含来自RSVIEW32(化工厂的工业自动化数据日志)的时间序列数据。那部分很好&我最多可以绘制用户选择的3个标签,但我无法使第二个y轴工作,因为我缺少一些东西。我也想了解更多关于为其他增强功能动态设置选项字符串的信息。
var opts = {
series : { 'LE505 R505 Receiver Level': {axis: 'y2'} },
axes: {
'LE505 R505 Receiver Level': {
// set axis-related properties here
labelsKMB: true
}
},
underlayCallback: drawLines,
labelsDiv: document.getElementById('status'),
labelsSeparateLines: true,
legend: 'always',
colors: ["rgb(51,204,204)",
"rgb(255,100,100)",
"#00DD55",
"rgba(50,50,200,0.4)"],
width: $(window).innerWidth()-30,
height: $(window).innerHeight()-140,
title: tagselected,
xlabel: 'Time and Date',
ylabel: tagselected,
axisLineColor: 'white'
// drawXGrid: false
};
// opts.series[string2] = { axis: 'y2' };
g = new Dygraph(document.getElementById("demodiv"),rarray,opts);
我试过这个代码(不起作用)。我甚至没有尝试将其设置为变量,只是尝试设置文本字符串。
var opts = {
series : string1,
axes: string2,
underlayCallback: drawLines,
labelsDiv: document.getElementById('status'),
labelsSeparateLines: true,
legend: 'always',
colors: ["rgb(51,204,204)",
"rgb(255,100,100)",
"#00DD55",
"rgba(50,50,200,0.4)"],
width: $(window).innerWidth()-30,
height: $(window).innerHeight()-140,
title: tagselected,
xlabel: 'Time and Date',
ylabel: tagselected,
axisLineColor: 'white'
// drawXGrid: false
};
opts.series[string1] = { 'LE505 R505 Receiver Level': {axis: 'y2'} };
opts.series[string2] = { 'LE505 R505 Receiver Level': { labelsKMB: true } };
g = new Dygraph(document.getElementById("demodiv"),rarray,opts);
}
请忽略我之前的问题,我现在意识到我有语法问题&修正了它。我没有彻底阅读你的例子。以下示例作品&根据用户是否选中复选框在第二个轴上绘制
我唯一的其他关注点是,在哪里/是否有关于设置key:value对和更好地学习Javascript的参考。
var opts = {
series : { },
axes: { },
underlayCallback: drawLines,
labelsDiv: document.getElementById('status'),
labelsSeparateLines: true,
legend: 'always',
colors: ["rgb(51,204,204)",
"rgb(255,100,100)",
"#00DD55",
"rgba(50,50,200,0.4)"],
width: $(window).innerWidth()-30,
height: $(window).innerHeight()-140,
title: tagselected,
xlabel: 'Time and Date',
ylabel: tagselected,
axisLineColor: 'white'
// drawXGrid: false
};
if (document.getElementById('tag2_2nd_axis').checked) {
//alert("checked");
opts.series[tagselected2] = {axis: 'y2'};
opts.axes[tagselected2] = { labelsKBM: true};
} else {
//alert("Dual axes NOT checked");
}
- 下拉选择可自动更改第二个下拉选择
- 为什么不'在JQuery中找到第二个css选择器的工作
- 当单击第一个李时,它显示内容一,当单击第二个李时,它显示内容二
- CORS-重定向到第二个GET正在接收的页面
- 正则表达式与数字中的第二个点匹配
- 如何在react js中移动第二个组件
- 使用Javascript,如何显示<tr>在另一<tr>悬停时,隐藏第二个<tr>
- 关闭第二个事件源上的第一个事件源's onopen方法
- D3从嵌套的JSON中绘制第二个圆环图
- IE11中的第二个调用取消了第一个Fetch API调用
- 第一个字第一个字符第二个字第二个字符,一直到数组结束
- 角度指令:指向第二个元素
- 时间选择器:如何通过更改第一个值来更改第二个值
- 我如何从字符串中选出第一个单词的第一个字母,然后再选出第二个单词
- 与网络界面相比,谷歌搜索API有时会重复第一个结果,有时会重复第二个结果
- 第二个存在条件不起作用
- 从第一个日期选择器定义第二个日期选择器的开始日期
- 如果未选择第一个下拉列表,则禁用第二个下拉列表
- 设置选项对象关键点:值对以实现带第二个y轴的动态打印
- 如何从第二个打印页面开始打印网页页脚