Javascript 使用动态图时如何反转图例项的顺序？

我有一系列的5个面积图要在一个图形中绘制。我正在使用动态图

我希望图例以相反的顺序显示，但不希望更改.csv文件。在dygraphs文档页面中，我没有找到任何解决此问题的方法

请帮我找到出路

代码如下所示：

var g3=新动态图 document.getElementByIdgraphdiv3， data/area.csv， {labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， } 您可以使用“弯曲”和“反向弯曲方向”：

var csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; var g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， } 状态{display:flex；flex direction:column reverse} 状态span{顺序：-1} 您可以使用“弯曲”和“反向弯曲方向”：

var csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; var g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， } 状态{display:flex；flex direction:column reverse} 状态span{顺序：-1} 该选项允许您根据自己的心意自定义图例格式。在这种情况下，您可以调用默认的格式化程序，然后反转这些行。当x轴标签可见时，您需要注意将其保持在顶部，假设这是所需的行为：

函数legendFormatterdata，…args{ const html=Dygraph.Plugins.Legend.defaultFormatterdata，…args； 让line=html.split//； 如果data.x==null{ 行。反向； }否则{ lines=[lines[0]，…lines.slice1.reverse]； } 返回行。连接； } var csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-0 8-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; var g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， legendFormatter:legendFormatter } 该选项允许您根据自己的心意自定义图例格式。在这种情况下，您可以调用默认的格式化程序，然后反转这些行。当x轴标签可见时，您需要注意将其保持在顶部，假设这是所需的行为：

函数legendFormatterdata，…args{ const html=Dygraph.Plugins.Legend.defaultFormatterdata，…args； 让line=html.split//； 如果data.x==null{ 行。反向； }否则{ lines=[lines[0]，…lines.slice1.reverse]； } 返回行。连接； } var csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; var g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， legendFormatter:legendFormatter }

---

您可以提供自己的自定义图例渲染器，但Kosh的CSS更改要简单得多

无论如何，如果您查看动态图源代码，您会注意到在static Legend.generateLegendHTML函数的末尾，有一个对该选项的检查：g.getOption'legendFormatter'

这意味着您可以提供自己版本的Legend.defaultFormatter

我所做的只是更改了引用data.series的两个位置，改为data.series.reverse。此外，我还对它进行了一些修饰，使它更加ES6友好

{ legendFormatter:reverseLegendFormatter } const csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; 常数g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， legendFormatter:reverseLegendFormatter } 函数ReverseElegendFormatterData{ 设g=data.dygraph； 如果g.getOption'showLabelsOnHighlight'！==true返回； 设sepLines=g.getOption'labelsSeparateLines'，htm lLines=[]； 如果type of data.x==‘未定义’{ 如果g.getOption'legend'！='always'返回； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.dashHTML}${series.labelHTML} `; }; }否则{ 推送`${data.xHTML}:`； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.labelHTML}： &160；${series.yHTML} `; }; } 返回htmlines.joinsepLines？：； } 演示 const csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; 常数g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， legendFormatter:ReverseElegendFormatter， labelsSeparateLines:false//这里真的很亮！ } 函数ReverseElegendFormatterData{ 设g=data.dygraph； 如果g.getOption'showLabelsOnHighlight'！==true返回； 设sepLines=g.getOption'labelseparatelines'，htmlines=[]； 如果type of data.x==‘未定义’{ 如果g.getOption'legend'！='always'返回； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.dashHTML}${series.labelHTML} `; }; }否则{ 推送`${data.xHTML}:`； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.labelHTML}： &160；${series.yHTML} `; }; } 返回htmlines.joinsepLines？：； }

---

您可以提供自己的自定义图例渲染器，但Kosh的CSS更改要简单得多

无论如何，如果您查看动态图源代码，您会注意到在static Legend.generateLegendHTML函数的末尾，有一个对该选项的检查：g.getOption'legendFormatter'

这意味着您可以提供自己版本的Legend.defaultFormatter

我所做的只是更改了引用data.series的两个位置，改为data.series.reverse。此外，我还对它进行了一些修饰，使它更加ES6友好

{ legendFormatter:reverseLegendFormatter } const csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; 常数g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， legendFormatter:reverseLegendFormatter } 函数ReverseElegendFormatterData{ 设g=data.dygraph； 如果g.getOpti 关于“showLabelsOnHighlight”！==真实回报； 设sepLines=g.getOption'labelseparatelines'，htmlines=[]； 如果type of data.x==‘未定义’{ 如果g.getOption'legend'！='always'返回； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.dashHTML}${series.labelHTML} `; }; }否则{ 推送`${data.xHTML}:`； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.labelHTML}： &160；${series.yHTML} `; }; } 返回htmlines.joinsepLines？：； } 演示 const csv=btoa`年-月，1类，2类，3类，5类，6类 1982-01-01,0.617100372,2.669144981,6.43866171,17.15241636,30.49070632 1982-02-01,0.081784387,1.278810409,3.955390335,12.29739777,24.58736059 1982-03-01,0.104089219,0.996282528,3.568773234,11.98513011,21.81412639 1982-04-01,0.022304833,0.505576208,2.453531599,9.56133829,19.97769517 1982-05-01,0.215613383,2.066914498,7.152416357,18.47583643,31.21189591 1982-06-01,0.133828996,1.144981413,4.29739777,15.53159851,29.40520446 1982-07-01,3.910780669,8.505576208,16.69144981,35.10037175,48.4535316 1982-08-01,0.609665428,3.353159851,8.698884758,21.0260223,31.81412639 1982-09-01,2.579925651,6.059479554,12.95910781,29.91821561,43.04089219 1982-10-01,4.661710037,10.73605948,20.92193309,39.18215613,52.46096654 1982-11-01,0.713754647,2.750929368,7.420074349,17.23420074,27.67286245 1982-12-01,0.795539033,2.788104089,7.31598513,18.04460967,29.76951673`; 常数g3=新动态图 document.getElementByIdgraphdiv3， '数据：应用程序/文本+csv；base64，“+csv{ labelsDiv:document.getElementById'status'， 标签：正确， labelsKMB：没错， 传说：“永远”， xlabel:'日期'， ylabel:'区域'， drawGrid:false， 滚动周期：10， 是的， 是的， fillAlpha:1.0， showRangeSelector:对， interactionModel:Dygraph.defaultInteractionModel， legendFormatter:ReverseElegendFormatter， labelsSeparateLines:false//这里真的很亮！ } 函数ReverseElegendFormatterData{ 设g=data.dygraph； 如果g.getOption'showLabelsOnHighlight'！==true返回； 设sepLines=g.getOption'labelseparatelines'，htmlines=[]； 如果type of data.x==‘未定义’{ 如果g.getOption'legend'！='always'返回； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.dashHTML}${series.labelHTML} `; }; }否则{ 推送`${data.xHTML}:`； data.series.reverse .filterseries=>series.isVisible .forEachseries=>{ 推` ${series.labelHTML}： &160；${series.yHTML} `; }; } 返回htmlines.joinsepLines？：； }

---

以相反的顺序读取文件/行？我想以相反的顺序读取文件会改变打印顺序。我不想这样。在打印时捕获图例详细信息，然后在应用之前将其反转。另外，如果你想得到任何人的帮助，你需要提供一个代码示例。我是一个初学者。我不明白如何做到这一点的技术问题。有这种方法的例子吗？发布示例CSV数据。反向读取文件/行？我想反向读取文件会改变打印顺序。我不想这样。在打印时捕获图例详细信息，然后在应用之前将其反转。另外，如果你想得到任何人的帮助，你需要提供一个代码示例。我是一个初学者。我不明白如何做到这一点的技术问题。有这种方法的例子吗？发布示例CSV数据。我在阅读源代码时注意到了这个选项。实际上我没有读API。您可以查看下面我的完整示例。此外，当labelsSeparateLines为false时，这种奇特的HTML拆分技巧将不起作用。我在阅读源代码时注意到了这个选项。实际上我没有读API。您可以查看我下面的完整示例。此外，当labelsSeparateLines为false时，这种奇特的HTML拆分技巧将不起作用。图形有一个legendFormatter选项。我在下面实现了另一种解决方案。图中有一个legendFormatter选项。我在下面实现了一个替代解决方案。