| <html> |
| <head> |
| <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script> |
| <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script> |
| <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script> |
| <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet"> |
| <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet"> |
| <style type="text/css"> |
| |
| html, |
| body, |
| #container { |
| width: 400px; |
| height: 350px; |
| margin: 0; |
| padding: 0; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div id="container"></div> |
| |
| |
| <script> |
| |
| anychart.onDocumentReady(function () { |
| |
| |
| var dataSet = anychart.data.set(getData()); |
| |
| |
| |
| var firstSeriesData = dataSet.mapAs({ x: 0, value: 1 }); |
| |
| |
| |
| var secondSeriesData = dataSet.mapAs({ x: 0, value: 2 }); |
| |
| |
| |
| var thirdSeriesData = dataSet.mapAs({ x: 0, value: 3 }); |
| |
| |
| |
| var fourthSeriesData = dataSet.mapAs({ x: 0, value: 4 }); |
| |
| |
| var chart = anychart.line(); |
| |
| |
| chart.animation(true); |
| |
| |
| chart.title('Acceptance of same-sex relationships in the US over the last 2 decades'); |
| |
| |
| chart.yAxis().title('% of people who accept same-sex relationships'); |
| |
| |
| chart.crosshair().enabled(true).yLabel(false).yStroke(null); |
| |
| |
| var firstSeries = chart.line(firstSeriesData); |
| firstSeries |
| .name('18-34') |
| .stroke('3 #f49595') |
| .tooltip() |
| .format('Age group 18-34 : {%value}%'); |
| |
| |
| var secondSeries = chart.line(secondSeriesData); |
| secondSeries |
| .name('35-49') |
| .stroke('3 #f9eb97') |
| .tooltip() |
| .format('Age group 35-49 : {%value}%'); |
| |
| |
| var thirdSeries = chart.line(thirdSeriesData); |
| thirdSeries |
| .name('50-64') |
| .stroke('3 #a8d9f6') |
| .tooltip() |
| .format('Age group 50-64 : {%value}%'); |
| |
| |
| var fourthSeries = chart.line(fourthSeriesData); |
| fourthSeries |
| .name('65+') |
| .stroke('3 #e2bbfd') |
| .tooltip() |
| .format('Age group 65+ : {%value}%'); |
| |
| |
| chart.legend().enabled(true); |
| |
| |
| chart.container('container'); |
| |
| |
| chart.draw(); |
| |
| }); |
| |
| function getData() { |
| return [ |
| ['1990',16.9,12.2,10.2,5.2], |
| ['1991',17,17.8,10,4.8], |
| ['1993',26.5,23.8,16.8,6.6], |
| ['1994',28.7,22,17.3,9.1], |
| ['1996',35.7,24,22.6,9.2], |
| ['1998',37.2,24.6,22.4,11.2], |
| ['2000',36.5,26.2,23.7,9.9], |
| ['2002',40,34.4,23.8,16.4], |
| ['2004',33.3,28.8,32.5,14.3], |
| ['2006',40.2,32.1,27.5,15.1], |
| ['2008',49.3,37.2,31.4,17.1], |
| ['2010',51.9,42.5,36.1,28.5], |
| ['2012',53.1,43.8,36,24.6], |
| ['2014',63.7,45.9,44.7,31.3], |
| ['2016',66.3,52,42.3,37.2], |
| ['2018',70.1,57.7,49.2,39] |
| ]; |
| } |
| |
| </script> |
| </body> |
| </html> |
- 效果图

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步