设置选项对象关键点:值对以实现带第二个y轴的动态打印

Setting options object key: value pairs to achieve dynamic plotting w/2nd y-axis

本文关键字:第二个 打印 动态 实现 对象 选项 关键点 设置      更新时间:2023-09-26

我需要在绘图中添加第二个轴。我们经常绘制温度(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");
           }