本WIKI由呜呜kurumi申请于2021年03月15日创建,编辑权限开放

如有内容错误,可以联系站长呜呜kurumi提交错误,赛马娘WIKI力求给大家带来最好的体验,也欢迎训练员们和我们一起建设
bugfix0531
全站通知:

Widget:LOH

来自赛马娘WIKI_BWIKI_哔哩哔哩
跳到导航 跳到搜索


<style>

   /* Dropdown Button */
   .widgetContainer select {
       background-color: white;
       padding: 16px;
       font-size: 16px;
       width: auto;
       cursor: pointer;
   
   }
   .widgetContainer .selectOpen {
       z-index:9;
       background: red;
       color: white;
   }
   
   .widgetContainer .dropbtn {
       background-color: white;
       padding: 16px;
       font-size: 16px;
   
       cursor: pointer;
   
   }
   
   /* Dropdown button on hover & focus */
   .widgetContainer .dropbtn:hover,
   .widgetContainer .dropbtn:focus {
       background-color: #3e8e41;
   }
   
   /* The search field */
   #myInput,#myInput1,#myInput2,#myInput3,#myInput4,#myInput5,#myInput6 {
       box-sizing: border-box;
       font-size: 16px;
       padding: 14px 20px 12px 12px;
       border: none;
       width:100%;
       border-bottom: 1px solid #ddd;
       top: 0px;
       position: -webkit-sticky;
       position: sticky;
   }
   
   
   /* The search field when it gets focus/clicked on */
   #myInput,#myInput1,#myInput2,#myInput3,#myInput4,#myInput5,#myInput6:focus {
       outline: 3px solid #ddd;
   }
   

/* The container

- needed to position the dropdown content */
   .widgetContainer .dropdown {
       position: relative;
       display: inline-block;
   }
   
   /* Dropdown Content (Hidden by Default) */
   .widgetContainer .dropdown-content {
       display: none;
       position: absolute;
       background-color: #f6f6f6;
       min-width: 230px;
       height: 300px;
       overflow-y: scroll;
       border: 1px solid #ddd;
       z-index: 1;
   }
   
   /* Links inside the dropdown */
   .widgetContainer .dropdown-content a {
       color: black;
       padding: 12px 16px;
       text-decoration: none;
       display: block;
   }
   
   /* Change color of dropdown links on hover */
   .widgetContainer .dropdown-content a:hover {
       background-color: #f1f1f1
   }
   
   /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
   .widgetContainer .show {
       display: block;
   }
   
   
   
   
   .cardIcon {
       height: 120px;
       width: auto;
       background-size: 100% 100%;
   }
   .cardIcon1 {
       height: 150px;
       width: auto;
       background-size: 100% 100%;
   }
   .skillIcon {
       height: 80px;
       width: auto;
       background-size: 100% 100%;
   }
   
   .widgetContainer .panel {
       padding: 0;
       border-radius: 5px;
       margin: 0 0 15px 0;
   }
   
   .widgetContainer .row {
       padding: 0 15px;
   }
   
   .widgetContainer .row [class^='col-'] {
       padding: 0 5px;
   }
   
   .modContainer {
       padding: 10px !important;
       border: 1px #ddd solid;
       height: auto;
       background:white;
       margin:10px 0px;
   }
   .skContainer {
       padding: 10px !important;
       border: 1px #ddd solid;
       height: 80px;
       background-color:white;
       margin:10px 0px;
   }
   
   
   .widgetContainer table {
       border-spacing: 0;
       width: 100%;
       border: 1px solid #ddd;
       border-top: 0px;
   }
   
   .widgetContainer th {
       background-color: #bff7bb;
       border-bottom: 1px solid #ddd;
       color: black;
       position: sticky;
       width: 10px;
       top: 0;
   
   }
   
   .widgetContainer th,
   td {
       text-align: left;
       white-space: normal !important;
       padding: 16px;
   }
   
   .widgetContainer tr:nth-child(even) {
       background-color: #f2f2f2;
   }
   
   .panelHeading {
       width: 100%;
       padding: 10px 15px;
       border-radius: 5px 5px 0 0;
       font-size: 20px;
       font-weight: bold;
       margin: 0 0 15px 0;
       cursor: pointer;
   }
   
   .panelNews, .panelData {
       border: #bce8f1 1px solid;
   }
   
   .panelHNews, .panelHData {
       color: #31708f;
       background: #d9edf7;
   }
   
   .panelComp {
       border: #bff7bb 1px solid;
   }
   
   .panelHComp {
       color: black;
       background: #bff7bb;
   }
   .panelSpc {
       border: #00BFFF 1px solid;
   }
   .panelHSpc {
       color: black;
       background: #00BFFF;
   }
   .panelSpsk {
       border: #FFA500 1px solid;
   }
   .panelHSpsk {
       color: black;
       background: #FFA500;
   }
   .panelRace {
       border: #33CC99 1px solid;
   }
   .panelHRace {
       color: black;
       background: #33CC99;
   }
   .inhalt{
       padding:15px;
   }
   .txtitle{
       font-weight: bold;
       font-size: 20px;
   }
   .txbigger{
       font-size: 18px;
   }
   .underline-border {
   box-shadow: none;
   border-width: 0 0 1px 0;
   }
   .ui-slider-range{
   background:blue;
   }
   .ui-slider-handle{
   border-radius: 50%;
   top:-9px!important;
   height:20px!important;
   width:20px!important;
   }
   </style>
   
   
       <label class="panelHeading panelHSpc">
           <input type="checkbox" style="display: none;" data-bind="checked: dataFold" />
分数曲线(默认折叠)
       </label>
           
排名范围:   <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_l" oninput="if(value>300)value=300;if(value<1)value=1"> ~  <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_h" oninput="if(value>300)value=300;if(value<1)value=1">
               <canvas data-bind="chart: { type: 'line', data: 折线图, 
         options: { observeChanges: true, throttle: 1000,
           responsive: true,
           maintainAspectRatio: true,
           tooltips: {
               mode: 'index',
               intersect: false,
           },
           scales:{
               yAxes:[{
                   ticks: {
                   beginAtZero: false,}    
                   }]
                   },
           hover: {
               mode: 'index',
               intersect: false,
           },
           legend: {
               labels : {
                 usePointStyle: false,
               }
           } } }"></canvas>
       <label class="panelHeading panelHNews">
           <input type="checkbox" style="display: none;" data-bind="checked: newsFold" />
角色数据
       </label>
                       筛选条件: 

                               角色: 
                               剧本: 
<select data-bind="options: 剧本表, value: 剧本, optionsText: '名称'"></select>
                               跑法: 
<select data-bind="options: 跑法表, value: 跑法, optionsText: '名称'"></select>
                             副表: 
<select data-bind="options: 副表, value: 副表选项, optionsText: '名称'"></select>
                         
排名范围:   <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_l" oninput="if(value>300)value=300;if(value<1)value=1"> ~  <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_h" oninput="if(value>300)value=300;if(value<1)value=1">
                   <canvas id="myChart1" style="min-height:200px;" data-bind="chart: { type: 'bar', data: 阵容柱图, 
       options: { observeChanges: true, throttle: 1000,
       maintainAspectRatio: false,
       legend:{display:false},
       title: {
                 display: true,
                 text: '阵容数据',
                 fontSize: 25,
                 padding: 20
       },
       scales: {
           yAxes:[{  
             barPercentage: 0.75,
             maxBarThickness: 100,
             gridLines:{drawOnChartArea: true},
             ticks: {fontSize: 15}    
             }]  },

tooltips: {

   enabled: false

}, events: false, hover: {

   animationDuration: 0

}, animation: {

   duration: 1000,
   onComplete: function () {
       var chartInstance = this.chart,
           ctx = chartInstance.ctx;
       ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
       ctx.textAlign = 'center';
       ctx.textBaseline = 'bottom';
       this.data.datasets.forEach(function (dataset, i) {
           var meta = chartInstance.controller.getDatasetMeta(i);
           meta.data.forEach(function (bar, index) {
               var data = dataset.data[index];
               ctx.fillText(data, bar._model.x, bar._model.y - 5);
           });
       });
   }

}

} }"></canvas>
                   <canvas style="height: 300px;width:300px" data-bind="chart: { type: 'doughnut', data: 跑法饼图, 
       options: { observeChanges: true,throttle: 1000,
       responsive: true,
       maintainAspectRatio: false, 
       title: {
             display: true,
             text: '跑法分布',
             fontSize: 25,
             padding: 10
           }} }"></canvas>
                     <canvas style="min-height:650px;" data-bind="chart: { type: 'horizontalBar', data: 角色柱图, 
         options: { observeChanges: true, throttle: 1000,
         maintainAspectRatio: false,
         legend:{display:false},
         title: {
                   display: true,
                   text: '角色出场率排名 (%)',
                   fontSize: 25,
                   padding: 10
         },
         scales: {
             yAxes:[{  
               barPercentage: 0.75,
               maxBarThickness: 100,
               gridLines:{drawOnChartArea: false},
               ticks: {fontSize: 15}    
               }],
             xAxes:[{  
               ticks: {max:110,min:0}    
               }]
               },
         tooltips: {
     enabled: false
 },
 events: false,
 hover: {
     animationDuration: 0
 },
 animation: {
     duration: 1000,
     onComplete: function () {
         var chartInstance = this.chart,
             ctx = chartInstance.ctx;
         ctx.font = Chart.helpers.fontString(15, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         this.data.datasets.forEach(function (dataset, i) {
             var meta = chartInstance.controller.getDatasetMeta(i);
             meta.data.forEach(function (bar, index) {
                 var data = dataset.data[index];
                 ctx.fillText(data, bar._model.x + 15, bar._model.y + 7.5 );
             });
         });
     }
 }
} }"></canvas>
                     <canvas style="min-height:650px;" data-bind="chart: { type: 'horizontalBar', data: 角色胜率柱图, 
         options: { observeChanges: true, throttle: 1000,
         maintainAspectRatio: false,
         legend:{display:false},
         title: {
                   display: true,
                   text: '副表排名 (%)',
                   fontSize: 25,
                   padding: 10
         },
         scales: {
             yAxes:[{  
               barPercentage: 0.75,
               maxBarThickness: 100,
               gridLines:{drawOnChartArea: false},
               ticks: {fontSize: 15}    
               }],
             xAxes:[{  
               ticks: {max:110,min:0}    
               }]
               },
         tooltips: {
     enabled: false
 },
 events: false,
 hover: {
     animationDuration: 0
 },
 animation: {
     duration: 1000,
     onComplete: function () {
         var chartInstance = this.chart,
             ctx = chartInstance.ctx;
         ctx.font = Chart.helpers.fontString(15, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         this.data.datasets.forEach(function (dataset, i) {
             var meta = chartInstance.controller.getDatasetMeta(i);
             meta.data.forEach(function (bar, index) {
                 var data = dataset.data[index];
                 ctx.fillText(data, bar._model.x + 15, bar._model.y + 7.5 );
             });
         });
     }
 }
} }"></canvas>
角色前十二:
                                   <img class="cardIcon" data-bind="attr:{src: 图标}">
                                   






     <label class="panelHeading panelHComp">
         <input type="checkbox" style="display: none;" data-bind="checked: compFold" />
育成相关
     </label>
                 筛选条件: 

                         角色: 
                       支援卡类型: 
<select data-bind="options: 支援卡类型表, value: 支援卡类型, optionsText: '名称'"></select>
                     剧本: 
<select data-bind="options: 剧本表, value: 剧本, optionsText: '名称'"></select>
                         跑法: 
<select data-bind="options: 跑法表, value: 跑法, optionsText: '名称'"></select>
                   
排名范围:   <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_l" oninput="if(value>300)value=300;if(value<1)value=1"> ~  <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_h" oninput="if(value>300)value=300;if(value<1)value=1">
                     <canvas id="myChart1" style="min-height:200px;" data-bind="chart: { type: 'bar', data: 五维柱图, 
         options: { observeChanges: true, throttle: 1000,
         maintainAspectRatio: false,
         legend:{display:false},
         title: {
                   display: true,
                   text: '平均五维',
                   fontSize: 25,
                   padding: 20
         },
         scales: {
             yAxes:[{  
               barPercentage: 0.75,
               maxBarThickness: 100,
               gridLines:{drawOnChartArea: true},
               ticks: {fontSize: 15}    
               }]  },
 tooltips: {
     enabled: false
 },
 events: false,
 hover: {
     animationDuration: 0
 },
 animation: {
     duration: 1000,
     onComplete: function () {
         var chartInstance = this.chart,
             ctx = chartInstance.ctx;
         ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         this.data.datasets.forEach(function (dataset, i) {
             var meta = chartInstance.controller.getDatasetMeta(i);
             meta.data.forEach(function (bar, index) {
                 var data = dataset.data[index];
                 ctx.fillText(data, bar._model.x, bar._model.y - 5);
             });
         });
     }
 }
} }"></canvas>
           <canvas style="max-height:200px;" data-bind="chart: { type: 'bar', data: 支援卡平均柱图, 

options: { observeChanges: true, throttle: 1000, maintainAspectRatio: false, legend:{display:false}, title: {

         display: true,
         text: '支援卡类型平均数',
         fontSize: 25,
         padding: 20

}, scales: {

   yAxes:[{  
     barPercentage: 0.75,
     maxBarThickness: 100,
     gridLines:{drawOnChartArea: true},
     ticks: {fontSize: 15}    
     }]  },

tooltips: { enabled: false }, events: false, hover: { animationDuration: 0 }, animation: { duration: 1000, onComplete: function () { var chartInstance = this.chart,

   ctx = chartInstance.ctx;

ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily); ctx.textAlign = 'center'; ctx.textBaseline = 'bottom';

this.data.datasets.forEach(function (dataset, i) {

   var meta = chartInstance.controller.getDatasetMeta(i);
   meta.data.forEach(function (bar, index) {
       var data = dataset.data[index];
       ctx.fillText(data, bar._model.x, bar._model.y - 5);
   });

}); } }

} }"></canvas>
                     <canvas style="min-height:200px;" data-bind="chart: { type: 'bar', data: 因子柱图, 
         options: { observeChanges: true, throttle: 1000,
         maintainAspectRatio: false,
         legend:{display:false},
         title: {
                   display: true,
                   text: '继承蓝色因子平均星数',
                   fontSize: 25,
                   padding: 20
         },
         scales: {
             yAxes:[{  
               barPercentage: 0.75,
               maxBarThickness: 100,
               gridLines:{drawOnChartArea: true},
               ticks: {fontSize: 15}    
               }]  },
 tooltips: {
     enabled: false
 },
 events: false,
 hover: {
     animationDuration: 0
 },
 animation: {
     duration: 1000,
     onComplete: function () {
         var chartInstance = this.chart,
             ctx = chartInstance.ctx;
         ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         this.data.datasets.forEach(function (dataset, i) {
             var meta = chartInstance.controller.getDatasetMeta(i);
             meta.data.forEach(function (bar, index) {
                 var data = dataset.data[index];
                 ctx.fillText(data, bar._model.x, bar._model.y - 5);
             });
         });
     }
 }
} }"></canvas>
                     <canvas style="min-height:200px;" data-bind="chart: { type: 'bar', data: 红色因子柱图, 
         options: { observeChanges: true, throttle: 1000,
         maintainAspectRatio: false,
         legend:{display:false},
         title: {
                   display: true,
                   text: '继承红色因子平均星数',
                   fontSize: 25,
                   padding: 20
         },
         scales: {
             yAxes:[{  
               barPercentage: 0.75,
               maxBarThickness: 100,
               gridLines:{drawOnChartArea: true},
               ticks: {fontSize: 15}    
               }]  },
 tooltips: {
     enabled: false
 },
 events: false,
 hover: {
     animationDuration: 0
 },
 animation: {
     duration: 1000,
     onComplete: function () {
         var chartInstance = this.chart,
             ctx = chartInstance.ctx;
         ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         this.data.datasets.forEach(function (dataset, i) {
             var meta = chartInstance.controller.getDatasetMeta(i);
             meta.data.forEach(function (bar, index) {
                 var data = dataset.data[index];
                 ctx.fillText(data, bar._model.x, bar._model.y - 5);
             });
         });
     }
 }  
} }"></canvas>
                     <canvas style="height: 300px;width:300px" data-bind="chart: { type: 'doughnut', data: 剧本饼图, 
           options: { observeChanges: true, throttle: 1000,
             responsive: true,
             maintainAspectRatio: false,           
             title: {
                   display: true,
                   text: '育成剧本',
                   fontSize: 25,
                   padding: 10
               } } }"></canvas>
                     <canvas style="height:800px;" data-bind="chart: { type: 'horizontalBar', data: 支援卡柱图, 
         options: { observeChanges: true, throttle: 1000,
         maintainAspectRatio: false,
         legend:{display:false},
         title: {
                   display: true,
                   text: '支援卡使用率排行(%)',
                   fontSize: 25,
                   padding: 10
         },
         scales: {
             yAxes:[{  
               barPercentage: 0.75,
               maxBarThickness: 100,
               gridLines:{drawOnChartArea: false},
               ticks: {fontSize: 15,max: 100}    
               }],
             xAxes:[{
             ticks: {max: 110,min:0}    
               }]
               },
         tooltips: {
     enabled: false
 },
 events: false,
 hover: {
     animationDuration: 0
 },
 animation: {
     duration: 1000,
     onComplete: function () {
         var chartInstance = this.chart,
             ctx = chartInstance.ctx;
         ctx.font = Chart.helpers.fontString(15, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         this.data.datasets.forEach(function (dataset, i) {
             var meta = chartInstance.controller.getDatasetMeta(i);
             meta.data.forEach(function (bar, index) {
                 var data = dataset.data[index];
                 ctx.fillText(data, bar._model.x + 15, bar._model.y + 7.5 );
             });
         });
     }
 }
} }"></canvas>
                     <canvas style="height:600px;" data-bind="chart: { type: 'horizontalBar', data: 支援卡借用柱图, 
         options: { observeChanges: true, throttle: 1000,
         maintainAspectRatio: false,
         legend:{display:false},
         title: {
                   display: true,
                   text: '支援卡借用率排行(%)',
                   fontSize: 25,
                   padding: 10
         },
         scales: {
             yAxes:[{  
               barPercentage: 0.75,
               maxBarThickness: 100,
               gridLines:{drawOnChartArea: false},
               ticks: {fontSize: 15}    
               }],
             xAxes:[{
             ticks: {min:0}    
               }]
                 },
         tooltips: {
     enabled: false
 },
 events: false,
 hover: {
     animationDuration: 0
 },
 animation: {
     duration: 1000,
     onComplete: function () {
         var chartInstance = this.chart,
             ctx = chartInstance.ctx;
         ctx.font = Chart.helpers.fontString(15, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         this.data.datasets.forEach(function (dataset, i) {
             var meta = chartInstance.controller.getDatasetMeta(i);
             meta.data.forEach(function (bar, index) {
                 var data = dataset.data[index];
                 ctx.fillText(data, bar._model.x + 15, bar._model.y + 7.5 );
             });
         });
     }
 }
} }"></canvas>
部分支援卡参考:
                                     <img class="cardIcon" data-bind="attr:{src: 图标}">
                                     



   <label class="panelHeading panelHSpsk">
       <input type="checkbox" style="display: none;" data-bind="checked: spskFold" />
持有技能(默认折叠)
   </label>
                   筛选条件: 

                           角色: 
                           剧本: 
<select data-bind="options: 剧本表, value: 剧本, optionsText: '名称'"></select>
                           跑法: 
<select data-bind="options: 跑法表, value: 跑法, optionsText: '名称'"></select>
                     
排名范围:   <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_l" oninput="if(value>300)value=300;if(value<1)value=1"> ~  <input style="width:100px;display: inline-block;" class="form-control show-data text-center underline-border subtitle" data-bind="value: limit_h" oninput="if(value>300)value=300;if(value<1)value=1">
                   技能显示条件: 
                           技能稀有度: 
<select data-bind="options: 稀有度表, value: 技能稀有度, optionsText: '名称'"></select>
                           技能颜色: 
<select data-bind="options: 颜色表, value: 技能颜色, optionsText: '名称'"></select>
                   <canvas style="min-height:200px;" data-bind="chart: { type: 'bar', data: 技能稀有度柱图, 
       options: { observeChanges: true, throttle: 1000,
       maintainAspectRatio: false,
       legend:{display:false},
       title: {
                 display: true,
                 text: '技能稀有度平均个数',
                 fontSize: 25,
                 padding: 20
       },
       scales: {
           yAxes:[{  
             barPercentage: 0.75,
             maxBarThickness: 100,
             gridLines:{drawOnChartArea: true},
             ticks: {fontSize: 15}    
             }]  },

tooltips: {

   enabled: false

}, events: false, hover: {

   animationDuration: 0

}, animation: {

   duration: 1000,
   onComplete: function () {
       var chartInstance = this.chart,
           ctx = chartInstance.ctx;
       ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
       ctx.textAlign = 'center';
       ctx.textBaseline = 'bottom';
       this.data.datasets.forEach(function (dataset, i) {
           var meta = chartInstance.controller.getDatasetMeta(i);
           meta.data.forEach(function (bar, index) {
               var data = dataset.data[index];
               ctx.fillText(data, bar._model.x, bar._model.y - 5);
           });
       });
   }

}

} }"></canvas>
                   <canvas style="min-height:200px;" data-bind="chart: { type: 'bar', data: 技能颜色柱图, 
       options: { observeChanges: true, throttle: 1000,
       maintainAspectRatio: false,
       legend:{display:false},
       title: {
                 display: true,
                 text: '技能颜色平均个数',
                 fontSize: 25,
                 padding: 20
       },
       scales: {
           yAxes:[{  
             barPercentage: 0.75,
             maxBarThickness: 100,
             gridLines:{drawOnChartArea: true},
             ticks: {fontSize: 15}    
             }]  },

tooltips: {

   enabled: false

}, events: false, hover: {

   animationDuration: 0

}, animation: {

   duration: 1000,
   onComplete: function () {
       var chartInstance = this.chart,
           ctx = chartInstance.ctx;
       ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
       ctx.textAlign = 'center';
       ctx.textBaseline = 'bottom';
       this.data.datasets.forEach(function (dataset, i) {
           var meta = chartInstance.controller.getDatasetMeta(i);
           meta.data.forEach(function (bar, index) {
               var data = dataset.data[index];
               ctx.fillText(data, bar._model.x, bar._model.y - 5);
           });
       });
   }

}

} }"></canvas>
                   <canvas style="height: 300px;width:300px" data-bind="chart: { type: 'doughnut', data: 跑法饼图, 
       options: { observeChanges: true, throttle: 1000,
           responsive: true,
           maintainAspectRatio: false, 
           title: {
                 display: true,
                 text: '跑法分布',
                 fontSize: 25,
                 padding: 10
               }} }"></canvas>
                   单技能查询: 

                           技能名: 
                           中文名: 
                           
<img class="skillIcon" data-bind="attr:{src: selectedsk().图标}">
                           

                   <canvas style="height:900px;" data-bind="chart: { type: 'horizontalBar', data: 技能柱图, 
       options: { observeChanges: true, throttle: 1000,
       maintainAspectRatio: false,
       legend:{display:false},
       title: {
                 display: true,
                 text: '技能持有率排名 (%)',
                 fontSize: 25,
                 padding: 10
       },
       scales: {
           yAxes:[{  
             barPercentage: 0.75,
             maxBarThickness: 100,
             gridLines:{drawOnChartArea: false},
             ticks: {fontSize: 15}    
             }],
           xAxes:[{
           ticks: {max: 110,min:0}    
             }]
               },
       tooltips: {
   enabled: false

}, events: false, hover: {

   animationDuration: 0

}, animation: {

   duration: 1000,
   onComplete: function () {
       var chartInstance = this.chart,
           ctx = chartInstance.ctx;
       ctx.font = Chart.helpers.fontString(15, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
       ctx.textAlign = 'center';
       ctx.textBaseline = 'bottom';
       this.data.datasets.forEach(function (dataset, i) {
           var meta = chartInstance.controller.getDatasetMeta(i);
           meta.data.forEach(function (bar, index) {
               var data = dataset.data[index];
               ctx.fillText(data, bar._model.x + 15, bar._model.y + 7.5 );
           });
       });
   }

}

} }"></canvas>
                   <canvas style="height:900px;" data-bind="chart: { type: 'horizontalBar', data: 技能柱图中文, 
       options: { observeChanges: true, throttle: 1000,
       maintainAspectRatio: false,
       legend:{display:false},
       title: {
                 display: true,
                 text: '技能排名中文对照 (%)',
                 fontSize: 25,
                 padding: 10
       },
       scales: {
           yAxes:[{  
             barPercentage: 0.75,
             maxBarThickness: 100,
             gridLines:{drawOnChartArea: false},
             ticks: {fontSize: 15}    
             }],
           xAxes:[{
           ticks: {max: 110,min:0}    
             }]
               },
       tooltips: {
   enabled: false

}, events: false, hover: {

   animationDuration: 0

}, animation: {

   duration: 1000,
   onComplete: function () {
       var chartInstance = this.chart,
           ctx = chartInstance.ctx;
       ctx.font = Chart.helpers.fontString(15, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
       ctx.textAlign = 'center';
       ctx.textBaseline = 'bottom';
       this.data.datasets.forEach(function (dataset, i) {
           var meta = chartInstance.controller.getDatasetMeta(i);
           meta.data.forEach(function (bar, index) {
               var data = dataset.data[index];
               ctx.fillText(data, bar._model.x + 15, bar._model.y + 7.5 );
           });
       });
   }

}

} }"></canvas>
   <script src="https://wiki.biligame.com/ys/MediaWiki:Knockout.js?action=raw&ctype=text/javascript"></script>
   <script src="https://wiki.biligame.com/umamusume/MediaWiki:Chart.js?action=raw&ctype=text/javascript"></script>
   <script>
   
   (function(factory) {
       // Module systems magic dance.
   
       if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
         // CommonJS or Node: hard-coded dependency on "knockout"
         factory(require("knockout"), require("chart"), exports);
       } else if (typeof define === "function" && define["amd"]) {
         // AMD anonymous module with hard-coded dependency on "knockout"
         define(["knockout", "chart", "exports"], factory);
       } else {
         // <script> tag: use the global `ko` object, attaching a `mapping` property
         factory(ko, Chart);
       }
     }
     (function(ko, Chart, exports) {
   
       ko.observableGroup = function(observables) {
         var observableManager = {};
         var throttle = 0;
         var throttleTimeout;
   
         observableManager.throttle = function(duration) {
           throttle = duration;
           return observableManager;
         };
   
         observableManager.subscribe = function(handler) {
           function throttledHandler(val) {
             if (throttle > 0) {
               if (!throttleTimeout) {
                 throttleTimeout = setTimeout(function() {
                   throttleTimeout = undefined;
                   handler(val);
                 }, throttle);
               }
             } else {
               handler(val);
             }
           }
   
           for (var i = 0; i < observables.length; i++) {
             observables[i].subscribe(throttledHandler);
           }
   
           return observableManager;
         };
   
         return observableManager;
       };
   
       var getType = function(obj) {
         if ((obj) && (typeof(obj) === "object") && (obj.constructor == (new Date).constructor)) return "date";
         return typeof obj;
       };
   
       var getSubscribables = function(model) {
         var subscribables = [];
         scanForObservablesIn(model, subscribables);
         return subscribables;
       };
   
       var scanForObservablesIn = function(model, subscribables) {
         if (model === null || model === undefined) {
           return;
         }
   
         var propertyNames = [];
         if (window.navigator.userAgent.indexOf("MSIE") > -1 || navigator.userAgent.indexOf("Trident") > -1) {
           propertyNames = Object.getOwnPropertyNames(model);
         } else {
           propertyNames = Reflect.ownKeys(model);
         }
   
         propertyNames.forEach(function(propertyName) {
           var typeOfData = getType(model[propertyName]);
           switch (typeOfData) {
             case "object": {
               scanForObservablesIn(model[propertyName], subscribables);
             }
             break;
           case "array": {
             var underlyingArray = model[propertyName]();
             underlyingArray.forEach(function(entry, index) {
               scanForObservablesIn(underlyingArray[index], subscribables);
             });
           }
           break;
   
           default: {
             if (ko.isComputed(model[propertyName]) || ko.isObservable(model[propertyName])) {
               subscribables.push(model[propertyName]);
             }
           }
           break;
           }
         });
       };
   
       ko.bindingHandlers.chart = {
         init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
           var allBindings = allBindingsAccessor();
           var chartBinding = allBindings.chart;
           var activeChart;
           var chartData;
   
           var createChart = function() {
             var chartType = ko.unwrap(chartBinding.type);
             var data = ko.toJS(chartBinding.data);
             var options = ko.toJS(chartBinding.options);
   
             chartData = {
               type: chartType,
               data: data,
               options: options
             };
   
             activeChart = new Chart(element, chartData);
           };
   
           var refreshChart = function() {
             chartData.data = ko.toJS(chartBinding.data);
             activeChart.update();
             activeChart.resize();
           };
   
           var subscribeToChanges = function() {
             var throttleAmount = ko.unwrap(chartBinding.options.throttle) || 100;
             var dataSubscribables = getSubscribables(chartBinding.data);
             //console.log("found obs", dataSubscribables);
   
             ko.observableGroup(dataSubscribables)
               .throttle(throttleAmount)
               .subscribe(refreshChart);
           };
   
           createChart();
   
           if (chartBinding.options && chartBinding.options.observeChanges) {
             subscribeToChanges();
           }
         }
       };
   
     }));
     //slider
     
   
   
   function unfold(id) {
     document.getElementById(id).classList.toggle("show");
   }
   
   function filterFunction(ids,id) {
     var input, filter, ul, li, a, i;
     input = document.getElementById(ids);
     filter = input.value.toUpperCase();
     div = document.getElementById(id);
     a = div.getElementsByTagName("a");
     for (i = 0; i < a.length; i++) {
       txtValue = a[i].textContent || a[i].innerText;
       if (txtValue.toUpperCase().indexOf(filter) > -1) {
         a[i].style.display = "";
       } else {
         a[i].style.display = "none";
       }
     }
   }
   
   
   var data = JSON.parse(document.getElementById("data").innerHTML);
   var namelist = JSON.parse(document.getElementById("namelist").innerHTML);
   var rankscore = JSON.parse(document.getElementById("rankscore").innerHTML);
   
   ko.options.deferUpdates = true;
   var ViewModel = function() {
     var self = this;
   
   self.跑法表 = [
   {"id":0,"名称":"全部"},
   {"id":5,"名称":"大逃"},
   {"id":1,"名称":"逃"},
   {"id":2,"名称":"先"},
   {"id":3,"名称":"差"},
   {"id":4,"名称":"追"}
   ];
   self.支援卡类型表 = [
   {"id":0,"名称":"全部"},
   {"id":1,"名称":"速度"},
   {"id":2,"名称":"耐力"},
   {"id":3,"名称":"力量"},
   {"id":4,"名称":"毅力"},
   {"id":5,"名称":"智力"},
   {"id":6,"名称":"友人"},
   {"id":7,"名称":"团队"}
   ];
   self.稀有度表 = [
   {"id":0,"名称":"全部"},
   {"id":1,"名称":"传说"},
   {"id":2,"名称":"普通"},
   {"id":3,"名称":"普通·继承"},
   {"id":4,"名称":"进化"}
   ];
   self.颜色表 = [
   {"id":0,"名称":"全部"},
   {"id":1,"名称":"黄色"},
   {"id":2,"名称":"蓝色"},
   {"id":3,"名称":"绿色"},
   {"id":4,"名称":"红色"}
   ];
   self.剧本表 = [
   {"id":0,"名称":"全部"},
   {"id":1,"名称":"URA"},
   {"id":2,"名称":"青春杯"},
   {"id":3,"名称":"偶像杯"},
   {"id":4,"名称":"巅峰杯"},
   {"id":5,"名称":"大师杯"},
   {"id":6,"名称":"凯旋杯"},

{"id":7,"名称":"UAF"}, {"id":8,"名称":"种田杯"}, {"id":9,"名称":"机械杯"}, {"id":10,"名称":"传奇杯"}

   ];
   self.副表 = [
   {"id":0,"名称":"胜率"},
   {"id":1,"名称":"连对率"},
   {"id":2,"名称":"复胜率"}
   ];
     
   self.selectedname = ko.observable(namelist[0]);
   self.selectedcard = ko.observable(spcard[0]);
   self.selectedsk = ko.observable(skList[0]);
   self.跑法 = ko.observable(self.跑法表[0]);
   self.剧本 = ko.observable(self.剧本表[0]);
   self.副表选项 = ko.observable(self.副表[0]);
   self.limit_l = ko.observable(1);
   self.limit_h = ko.observable(300);
   self.支援卡类型 = ko.observable(self.支援卡类型表[0]);
   self.技能稀有度 = ko.observable(self.稀有度表[0]);
   self.技能颜色 = ko.observable(self.颜色表[0]);
   const runstyle = ["","逃","先","差","追","大逃"];
   //total,1,2,3,u
   const countable = ["rank_count_1","rank_count_2","rank_count_3","rank_count_unplaced"];
   var charal = [];
   
   for(let i in namelist){
     for(let j in charaList){
       if(charaList[j].id==namelist[i].id){
         charal.push([namelist[i].id,namelist[i].名称,charaList[j].图标]);
         break;
       }
     }
   }
   
   self.筛选数据 = ko.computed(function(){
     //  
     for(let k=0;k<spcard.length;k++){
        spcard[k]["数量"]=0;
         spcard[k]["借卡量"]=0;
     }
     var chara = new Array();
     //id,name,count,rankt,rank1,rank2,rank3,ranku,pic
     for(let b=0;b<charal.length;b++){
       chara.push([charal[b][0],charal[b][1],0,0,0,0,0,0,charal[b][2]]);
     }
     var sktable=new Array();
     for(let m=1;m<skList.length;m++){
       sktable.push([skList[m].id,skList[m].数量,skList[m].名称,skList[m].图标,skList[m].颜色,skList[m].稀有度,skList[m].中文名]);
     }
     var localdata = {
       "因子":{"速度":0,"耐力":0,"力量":0,"毅力":0,"智力":0,
               "芝":0,"ダート":0,"逃げ":0,"先行":0,"差し":0,
               "追込":0,"短距離":0,"マイル":0,"中距離":0,"長距離":0},
       "五维":{"速度":0,"耐力":0,"力量":0,"毅力":0,"智力":0},
       "跑法":{"逃":0,"先":0,"差":0,"追":0,"大逃":0},
       "URA":0,"青春杯":0,"巅峰杯":0,"偶像杯":0,"大师杯":0,"凯旋杯":0,"UAF":0,"种田杯":0,"机械杯":0,"传奇杯":0,
       "count":0,
       "支援卡":spcard,
       "角色":chara,
       "支援卡种类":{"速度":0,"耐力":0,"力量":0,"毅力":0,"智力":0,"友人":0,"团队":0},
       "颜色":{"黄色":0,"蓝色":0,"绿色":0,"红色":0},
       "稀有度":{"传说":0,"普通":0,"普通·继承":0,"进化":0},
       "单独技能":0,
     };
       
     var count = 0;
     for(let i in data){
       
           if(self.selectedname()["id"]==0||self.selectedname()["id"]==data[i]["card_id"]){
               if(self.跑法()["id"]==0||self.跑法()["id"]==data[i]["running_style"]){
                   if(self.剧本()["id"]==0||self.剧本()["id"]==data[i]["scenario_id"]){
                       if(self.limit_l() <= data[i]["rank"]&&data[i]["rank"] <= self.limit_h()){
                         count++;
                       //
                       localdata["跑法"][runstyle[data[i]["running_style"]]] +=1;
                       //
                       if(data[i]["scenario_id"]==2)
                           localdata["青春杯"]++;
                       if(data[i]["scenario_id"]==1)
                           localdata["URA"]++;
                       if(data[i]["scenario_id"]==4)
                           localdata["巅峰杯"]++;
                       if(data[i]["scenario_id"]==3)
                           localdata["偶像杯"]++;
                       if(data[i]["scenario_id"]==5)
                           localdata["大师杯"]++;
                       if(data[i]["scenario_id"]==6)
                           localdata["凯旋杯"]++;

if(data[i]["scenario_id"]==7) localdata["UAF"] += 1; if(data[i]["scenario_id"]==8) localdata["种田杯"] += 1; if(data[i]["scenario_id"]==9) localdata["机械杯"] += 1; if(data[i]["scenario_id"]==10) localdata["传奇杯"] += 1;

                       //
                       localdata["五维"]["速度"] += data[i]["speed"];
                       localdata["五维"]["耐力"] += data[i]["stamina"];
                       localdata["五维"]["力量"] += data[i]["power"];
                       localdata["五维"]["毅力"] += data[i]["guts"];
                       localdata["五维"]["智力"] += data[i]["wiz"];
                       //
                       localdata["因子"]["速度"] += data[i]["succession_factors"]["10"];
                       localdata["因子"]["耐力"] += data[i]["succession_factors"]["20"];
                       localdata["因子"]["力量"] += data[i]["succession_factors"]["30"];
                       localdata["因子"]["毅力"] += data[i]["succession_factors"]["40"];
                       localdata["因子"]["智力"] += data[i]["succession_factors"]["50"];
                       localdata["因子"]["芝"] += data[i]["succession_factors"]["11"];
                       localdata["因子"]["ダート"] += data[i]["succession_factors"]["12"];
                       localdata["因子"]["逃げ"] += data[i]["succession_factors"]["21"];
                       localdata["因子"]["先行"] += data[i]["succession_factors"]["22"];
                       localdata["因子"]["差し"] += data[i]["succession_factors"]["23"];
                       localdata["因子"]["追込"] += data[i]["succession_factors"]["24"];
                       localdata["因子"]["短距離"] += data[i]["succession_factors"]["31"];
                       localdata["因子"]["マイル"] += data[i]["succession_factors"]["32"];
                       localdata["因子"]["中距離"] += data[i]["succession_factors"]["33"];
                       localdata["因子"]["長距離"] += data[i]["succession_factors"]["34"];
                       //
                       for(let j=0;j<data[i]["support_card_list"].length;j++){
                           for(let k=0;k<localdata["支援卡"].length;k++){
                               if(data[i]["support_card_list"][j]==localdata["支援卡"][k]["id"]){
                                   if(self.支援卡类型().id==0 || self.支援卡类型().名称==localdata["支援卡"][k]["类型"]){
                                       if(j==5)
                                           localdata["支援卡"][k]["借卡量"]++;
                                       localdata["支援卡"][k]["数量"]++;
                                       localdata["支援卡种类"][localdata["支援卡"][k]["类型"]]++;
                                       break;
                                   }
                               }
                           }
                       }
                       //
                       for(let c in localdata["角色"]){
                         if(data[i]["card_id"] == localdata["角色"][c][0]){
                           localdata["角色"][c][2] ++;
                           localdata["角色"][c][3] += data[i]["rank_count_total"];
                           for(let d=0; d<countable.length;d++){
                             localdata["角色"][c][d+4] += Number(data[i][countable[d]]);
                           }
                           break;
                         }
                       }
                       //
                       for(let f in data[i]["skill_array"]){
                         for(let g in sktable){
                           if(sktable[g][0] == data[i]["skill_array"][f]["skill_id"]){
                             if(self.selectedsk()["id"]==sktable[g][0])
                               localdata["单独技能"]++;
                             if(self.技能稀有度()["id"]==0||self.技能稀有度()["名称"]==sktable[g][5]){
                               if(self.技能颜色()["id"]==0||self.技能颜色()["名称"]==sktable[g][4]){
                                 localdata["颜色"][sktable[g][4]]++;
                                 localdata["稀有度"][sktable[g][5]]++;
                                 sktable[g][1]++;
                                 break;
                               }
                             }
                           }
                         }
                       }
                   }
                   }
                   }
               }
           }
       //
       //for(let e in localdata["角色"]){
       //  for(let d in countable){
       //    localdata["角色"][e][d+4] = (localdata["角色"][e][d+4] / localdata["角色"][e][3]).toFixed(1);
       //  }
       //}
       sktable.sort(function(y, x){
         return x[1] - y[1];
       });
       sktable = sktable.slice(0,40);
       for(let n=0;n<sktable.length;n++){
         sktable[n][1]=((sktable[n][1] / count)*100).toFixed(1);	
       }
       localdata["单独技能"]=((localdata["单独技能"] / count)*100).toFixed(1);
       localdata["稀有度"]["传说"]=(localdata["稀有度"]["传说"] / count).toFixed(1);
       localdata["稀有度"]["普通"]=(localdata["稀有度"]["普通"] / count).toFixed(1);
       localdata["稀有度"]["普通·继承"]=(localdata["稀有度"]["普通·继承"] / count).toFixed(1);
       localdata["稀有度"]["进化"]=(localdata["稀有度"]["进化"] / count).toFixed(1);
       localdata["颜色"]["黄色"]=(localdata["颜色"]["黄色"] / count).toFixed(1);
       localdata["颜色"]["蓝色"]=(localdata["颜色"]["蓝色"] / count).toFixed(1);
       localdata["颜色"]["绿色"]=(localdata["颜色"]["绿色"] / count).toFixed(1);
       localdata["颜色"]["红色"]=(localdata["颜色"]["红色"] / count).toFixed(1);
       localdata["技能"] = sktable;
       //
       var fm = 100;
       if(self.selectedname()["id"]==0&&self.跑法()["id"]==0)
         fm = 300;
       for(let y=0;y<localdata["角色"].length;y++){
         localdata["角色"][y][9] = (localdata["角色"][y][2] / count*fm).toFixed(1);
       }
       localdata["五维"]["速度"]=(localdata["五维"]["速度"] / count).toFixed(0);
       localdata["五维"]["耐力"]=(localdata["五维"]["耐力"] / count).toFixed(0);
       localdata["五维"]["力量"]=(localdata["五维"]["力量"] / count).toFixed(0);
       localdata["五维"]["毅力"]=(localdata["五维"]["毅力"] / count).toFixed(0);
       localdata["五维"]["智力"]=(localdata["五维"]["智力"] / count).toFixed(0);
       //
       localdata["因子"]["速度"]=(localdata["因子"]["速度"] / count).toFixed(1);
       localdata["因子"]["耐力"]=(localdata["因子"]["耐力"] / count).toFixed(1);
       localdata["因子"]["力量"]=(localdata["因子"]["力量"] / count).toFixed(1);
       localdata["因子"]["毅力"]=(localdata["因子"]["毅力"] / count).toFixed(1);
       localdata["因子"]["智力"]=(localdata["因子"]["智力"] / count).toFixed(1);
       localdata["因子"]["芝"]=(localdata["因子"]["芝"] / count).toFixed(1);
       localdata["因子"]["ダート"]=(localdata["因子"]["ダート"] / count).toFixed(1);
       localdata["因子"]["逃げ"]=(localdata["因子"]["逃げ"] / count).toFixed(1);
       localdata["因子"]["先行"]=(localdata["因子"]["先行"] / count).toFixed(1);
       localdata["因子"]["差し"]=(localdata["因子"]["差し"] / count).toFixed(1);
       localdata["因子"]["追込"]=(localdata["因子"]["追込"] / count).toFixed(1);
       localdata["因子"]["短距離"]=(localdata["因子"]["短距離"] / count).toFixed(1);
       localdata["因子"]["マイル"]=(localdata["因子"]["マイル"] / count).toFixed(1);
       localdata["因子"]["中距離"]=(localdata["因子"]["中距離"] / count).toFixed(1);
       localdata["因子"]["長距離"]=(localdata["因子"]["長距離"] / count).toFixed(1);
       //
       localdata["支援卡种类"]["速度"]=(localdata["支援卡种类"]["速度"] / count).toFixed(2);
       localdata["支援卡种类"]["耐力"]=(localdata["支援卡种类"]["耐力"] / count).toFixed(2);
       localdata["支援卡种类"]["力量"]=(localdata["支援卡种类"]["力量"] / count).toFixed(2);
       localdata["支援卡种类"]["毅力"]=(localdata["支援卡种类"]["毅力"] / count).toFixed(2);
       localdata["支援卡种类"]["智力"]=(localdata["支援卡种类"]["智力"] / count).toFixed(2);
       localdata["支援卡种类"]["友人"]=(localdata["支援卡种类"]["友人"] / count).toFixed(2);
       localdata["支援卡种类"]["团队"]=(localdata["支援卡种类"]["团队"] / count).toFixed(2);
       localdata["count"] = count;
       return localdata;
   });
   
   
   self.角色数据 = ko.computed(function(){
     let temp=self.筛选数据()["角色"];
     temp.sort(function(y, x){
         return x[9] - y[9];
       });
     if(self.selectedname()["id"]==0){
         temp = temp.slice(0,20);
       return temp;
     }
     else {
         for(let i=0;i<temp.length;i++){
           if(self.selectedname()["id"]==temp[i][0])
             return [temp[i]];
       }
     }
   });
   self.角色y轴 = ko.computed(function(){
       let temp = [];
     for(let i=0;i<self.角色数据().length;i++){
         temp.push(self.角色数据()[i][1]);
     }
     
     return temp;
   });
   self.角色x轴 = ko.computed(function(){
       let temp = [];
     for(let i=0;i<self.角色数据().length;i++){
         temp.push(self.角色数据()[i][9]);
     }
     
     return temp;
   });
   self.角色胜率 = ko.computed(function(){
     let temp=JSON.parse(JSON.stringify(self.筛选数据()["角色"]));
     var num = Number(self.副表选项().id) + 4;
     var count1 = 0;
     for(let i in temp){
       count1 = 0;
       for(let j=4;j<=num;j++){
         count1 += Number(temp[i][j]);
       }
       //console.log(count1);
       temp[i][num] = (count1/temp[i][3]*100).toFixed(1);
     }
     temp.sort(function(y, x){
         return x[num] - y[num];
       });
     if(self.selectedname()["id"]==0){
         temp = temp.slice(0,20);
       return temp;
     }
     else {
         for(let i=0;i<temp.length;i++){
           if(self.selectedname()["id"]==temp[i][0])
             return [temp[i]];
       }
     }
   });
   self.角色胜率y轴 = ko.computed(function(){
       let temp = [];
     for(let i=0;i<self.角色胜率().length;i++){
         temp.push(self.角色胜率()[i][1]);
     }
     
     return temp;
   });
   self.角色胜率x轴 = ko.computed(function(){
       let temp = [];
     for(let i=0;i<self.角色胜率().length;i++){
         temp.push(self.角色胜率()[i][Number(self.副表选项().id) + 4]);
     }
     
     return temp;
   });
   //
   self.阵容数据 = ko.computed(function(){
     var typ = 1;
     if(self.selectedname()["id"]==0&&self.跑法()["id"]==0)
       typ = 3;
     return [
       (self.筛选数据()["跑法"]["大逃"] / self.筛选数据()["count"]*typ).toFixed(2),
       (self.筛选数据()["跑法"]["逃"] / self.筛选数据()["count"]*typ).toFixed(2),
       (self.筛选数据()["跑法"]["先"] / self.筛选数据()["count"]*typ).toFixed(2),
       (self.筛选数据()["跑法"]["差"] / self.筛选数据()["count"]*typ).toFixed(2),
       (self.筛选数据()["跑法"]["追"] / self.筛选数据()["count"]*typ).toFixed(2)
     ];
   });
   self.剧本数据 = ko.computed(function(){
       return [self.筛选数据()["URA"], self.筛选数据()["青春杯"], self.筛选数据()["巅峰杯"], self.筛选数据()["偶像杯"], self.筛选数据()["大师杯"], self.筛选数据()["凯旋杯"],self.筛选数据()["UAF"],self.筛选数据()["种田杯"],self.筛选数据()["机械杯"],self.筛选数据()["传奇杯"]];
   });
   self.五维数据 = ko.computed(function(){
       return [
       self.筛选数据()["五维"]["速度"], 
       self.筛选数据()["五维"]["耐力"], 
       self.筛选数据()["五维"]["力量"], 
       self.筛选数据()["五维"]["毅力"], 
       self.筛选数据()["五维"]["智力"] ];
   });
   self.因子数据 = ko.computed(function(){
       return [
       self.筛选数据()["因子"]["速度"], 
       self.筛选数据()["因子"]["耐力"], 
       self.筛选数据()["因子"]["力量"], 
       self.筛选数据()["因子"]["毅力"], 
       self.筛选数据()["因子"]["智力"] ];
   });
   self.红色因子数据 = ko.computed(function(){
       return [
       self.筛选数据()["因子"]["芝"], 
       self.筛选数据()["因子"]["ダート"], 
       self.筛选数据()["因子"]["逃げ"], 
       self.筛选数据()["因子"]["先行"],
       self.筛选数据()["因子"]["差し"], 
       self.筛选数据()["因子"]["追込"], 
       self.筛选数据()["因子"]["短距離"], 
       self.筛选数据()["因子"]["マイル"],
       self.筛选数据()["因子"]["中距離"],  
       self.筛选数据()["因子"]["長距離"] ];
   });
   self.支援卡平均 = ko.computed(function(){
       return [
       self.筛选数据()["支援卡种类"]["速度"], 
       self.筛选数据()["支援卡种类"]["耐力"], 
       self.筛选数据()["支援卡种类"]["力量"], 
       self.筛选数据()["支援卡种类"]["毅力"], 
       self.筛选数据()["支援卡种类"]["智力"],
       self.筛选数据()["支援卡种类"]["友人"],
       self.筛选数据()["支援卡种类"]["团队"]];
   });
   self.支援卡数据 = ko.computed(function(){
     let temp=[];
     let count = self.筛选数据()["count"]
     let data1 = self.筛选数据()["支援卡"];
     //console.log(data1);
     for(let i=0;i<data1.length;i++){
       let rate = 0;
       if(data1[i]["数量"]!=0)
           rate = ((data1[i]["借卡量"] / data1[i]["数量"])*100).toFixed(1);
       temp.push([data1[i]["名称"],((data1[i]["数量"] / count)*100).toFixed(1),rate,data1[i]["图标"]]);
     }
     temp.sort(function(y, x){
         return x[1] - y[1];
       });
     temp = temp.slice(0,20);
     return temp;
   });
   self.支援卡y轴 = ko.computed(function(){
     let temp = [];
     for(let i=0;i<self.支援卡数据().length;i++){
       temp.push(self.支援卡数据()[i][0]);
     }
     return temp;
   });
   self.支援卡x轴 = ko.computed(function(){
     let temp = [];
     for(let i=0;i<self.支援卡数据().length;i++){
       temp.push(self.支援卡数据()[i][1]);
     }
     return temp;
   });
   self.支援卡借用数据 = ko.computed(function(){
     let temp=[];
     let count = self.筛选数据()["count"]
     let data1 = self.筛选数据()["支援卡"];
   
     //console.log(data1);
     for(let i=0;i<data1.length;i++){
       temp.push([data1[i]["名称"],((data1[i]["借卡量"] / count)*100).toFixed(1)]);
     }
     temp.sort(function(y, x){
         return x[1] - y[1];
       });
     temp = temp.slice(0,15);
     return temp;
   });
   self.支援卡借用y轴 = ko.computed(function(){
     let temp = [];
     for(let i=0;i<self.支援卡借用数据().length;i++){
         temp.push(self.支援卡借用数据()[i][0]);
     }
     return temp;
   });
   self.支援卡借用x轴 = ko.computed(function(){
     let temp = [];
     for(let i=0;i<self.支援卡借用数据().length;i++){
         temp.push(self.支援卡借用数据()[i][1]);
     }
     return temp;
   });
   self.前十二 = ko.computed(function(){
       let temp=[];
       for(let i=0;i<12;i++){
           if(self.支援卡数据()[i][1]!=0)
             temp.push({"名称": self.支援卡数据()[i][0],"数量":self.支援卡数据()[i][1],"借卡率":self.支援卡数据()[i][2],"图标":self.支援卡数据()[i][3]});
     }
       return temp;
   });
   self.角色前十二 = ko.computed(function(){
       let temp=[];
       if(self.角色数据().length==1){
         temp.push({"名称": self.角色数据()[0][1],
             "人数":self.角色数据()[0][2],
             "参赛":self.角色数据()[0][3],
             "胜率":(self.角色数据()[0][4]/self.角色数据()[0][3]*100).toFixed(1),
             "连对率":((self.角色数据()[0][4]+self.角色数据()[0][5])/self.角色数据()[0][3]*100).toFixed(1),
             "复胜率":((self.角色数据()[0][4]+self.角色数据()[0][5]+self.角色数据()[0][6])/self.角色数据()[0][3]*100).toFixed(1),
             "图标":self.角色数据()[0][8]});
       }
       else{
         for(let i=0;i<12;i++){
           if(self.角色数据()[i][2]!=0){
           temp.push({"名称": self.角色数据()[i][1],
             "参赛":self.角色数据()[i][3],
             "人数":self.角色数据()[i][2],
             "胜率":(self.角色数据()[i][4]/self.角色数据()[i][3]*100).toFixed(1),
             "连对率":((self.角色数据()[i][4]+self.角色数据()[i][5])/self.角色数据()[i][3]*100).toFixed(1),
             "复胜率":((self.角色数据()[i][4]+self.角色数据()[i][5]+self.角色数据()[i][6])/self.角色数据()[i][3]*100).toFixed(1),
             "图标":self.角色数据()[i][8]});
         } 
       }
       }
       
     return temp;
   });
   self.跑法数据 = ko.computed(function(){
     return [self.筛选数据()["跑法"]["大逃"],self.筛选数据()["跑法"]["逃"],
     self.筛选数据()["跑法"]["先"],self.筛选数据()["跑法"]["差"],self.筛选数据()["跑法"]["追"]];
   });
   //
   
   
   self.跑法饼图 = {
       labels: ["大逃", "逃","先", "差", "追" ],
       datasets: [{
         data: self.跑法数据,
         backgroundColor: [
           "#996699",
           "#FF6384",
           "#FFCE56",
           "#36A2EB",
           "#7CFC00"
         ],
         hoverBackgroundColor: [
           "#996699",
           "#FF6384",
           "#FFCE56",
           "#36A2EB",
           "#7CFC00"
         ]
       }]
   };
   self.角色柱图 = {
       labels: self.角色y轴,
     datasets: [{
        data: self.角色x轴,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.角色胜率柱图 = {
       labels: self.角色胜率y轴,
     datasets: [{
        data: self.角色胜率x轴,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.剧本饼图 = {
       labels: ["URA","青春杯","巅峰杯","偶像杯","大师杯","凯旋杯","UAF","种田杯","机械杯","传奇杯"],
       datasets: [{
         data: self.剧本数据,
         backgroundColor: [
           "#fff3c0",
       "#ff7062",
       "#4becb6",
       "#d6c4f8",
       "#b5fe3f",
       "#fed97e",
       "#70cce7",
       "#fe79a6",
       "#ff8c30",
       "#01a0a5"
         ],
         hoverBackgroundColor: [
           "#fff3c0",
       "#ff7062",
       "#4becb6",
       "#d6c4f8",
       "#b5fe3f",
       "#fed97e",
       "#70cce7",
       "#fe79a6",
       "#ff8c30",
       "#01a0a5"
         ]
       }]
   };
   
   self.五维柱图 = {
       labels: ["速度","耐力","力量","毅力","智力"],
     datasets: [{
        data: self.五维数据,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.阵容柱图 = {
       labels: ["大逃","逃","先","差","追"],
     datasets: [{
        data: self.阵容数据,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.因子柱图 = {
       labels: ["速度","耐力","力量","毅力","智力"],
     datasets: [{
        data: self.因子数据,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.红色因子柱图 = {
       labels: ["草地","泥地","逃","先","差","追","短距","英里","中距","长距"],
     datasets: [{
        data: self.红色因子数据,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.支援卡平均柱图 = {
       labels: ["速度","耐力","力量","毅力","智力","友人","团队"],
     datasets: [{
        data: self.支援卡平均,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.支援卡柱图 = {
       labels: self.支援卡y轴,
     datasets: [{
        data: self.支援卡x轴,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.支援卡借用柱图 = {
       labels: self.支援卡借用y轴,
     datasets: [{
        data: self.支援卡借用x轴,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   
   
   
   self.支援卡剧本饼图 = {
       labels: ["URA","青春杯","巅峰杯","偶像杯","大师杯","凯旋杯"],
       datasets: [{
         data: self.支援卡剧本数据,
         backgroundColor: [
           "#FF6384",
           "#FFCE56",
           "#36A2EB",
           "#66FFFF",
           "#669966",
           "#CC9900"
         ],
         hoverBackgroundColor: [
           "#FF6384",
           "#FFCE56",
           "#36A2EB",
           "#66FFFF",
           "#669966",
           "#CC9900"
         ]
       }]
   };
   self.支援卡角色柱图 = {
       labels: self.支援卡角色y轴,
     datasets: [{
        data: self.支援卡角色x轴,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   
   
   self.技能稀有度数据 = ko.computed(function(){
       var temp=[
       self.筛选数据()["稀有度"]["传说"],
       self.筛选数据()["稀有度"]["普通"],
       self.筛选数据()["稀有度"]["普通·继承"],
       self.筛选数据()["稀有度"]["进化"]];
       return temp;
   });
   self.技能颜色数据 = ko.computed(function(){
       var temp=[
       self.筛选数据()["颜色"]["黄色"],
       self.筛选数据()["颜色"]["蓝色"],
       self.筛选数据()["颜色"]["绿色"],
       self.筛选数据()["颜色"]["红色"]];
       return temp;
   });
   
   self.技能稀有度柱图 = {
       labels: ["传说","普通","普通·继承","进化"],
     datasets: [{
        data: self.技能稀有度数据,
        backgroundColor:[ 
        "#FFD700",
        "#73BFB8",
        "#C0C0C0",
        "#7CFC00"
        ],
        barPercentage: 0.1,
     }]
   };
   self.技能颜色柱图 = {
       labels: ["黄色","蓝色","绿色","红色"],
     datasets: [{
        data: self.技能颜色数据,
        backgroundColor:[ 
        "#FFD700",
        "#00BFFF",
        "#7CFC00",
        "#DA70D6"
        ],
        barPercentage: 0.1,
     }]
   };
   self.技能y轴 = ko.computed(function(){
       var temp = [];
     for(var i=0;i<self.筛选数据()["技能"].length;i++){
         temp.push(self.筛选数据()["技能"][i][2]);
     }
     return temp;
   });
   self.技能y轴中文 = ko.computed(function(){
       var temp = [];
     for(var i=0;i<self.筛选数据()["技能"].length;i++){
         temp.push(self.筛选数据()["技能"][i][6]);
     }
     return temp;
   });
   self.技能x轴 = ko.computed(function(){
       var temp = [];
     for(var i=0;i<self.筛选数据()["技能"].length;i++){
         temp.push(self.筛选数据()["技能"][i][1]);
     }
     return temp;
   });
   self.前十 = ko.computed(function(){
       var temp=[];
       for(var i=0;i<10;i++){
           if(self.筛选数据()["技能"][i][1]!=0)
                 temp.push({"名称": self.筛选数据()["技能"][i][2],"使用率":self.筛选数据()["技能"][i][1],"图标":self.筛选数据()["技能"][i][3],"稀有度":self.筛选数据()["技能"][i][5]});
     }
       return temp;
   });
   self.技能柱图 = {
       labels: self.技能y轴,
     datasets: [{
        data: self.技能x轴,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.技能柱图中文 = {
       labels: self.技能y轴中文,
     datasets: [{
        data: self.技能x轴,
        backgroundColor: "#73BFB8",
        barPercentage: 0.1,
     }]
   };
   self.ranks = ko.computed(function(){
     return rankscore.slice(self.limit_l()-1,self.limit_h());
   });
   var ranklist = [];
   for(let i=1;i<=300;i++){
     ranklist.push(i);
   }
   self.rankl = ko.computed(function(){
     return ranklist.slice(self.limit_l()-1,self.limit_h());
   });
   
   self.折线图 = {
       labels: self.rankl,
       datasets: [{
           label: "分数",
           fill: false,
           lineTension: 0,
           borderColor: "#FF0000",
           backgroundColor:"#FF0000",
           data: self.ranks
         }]
     };
   
   self.selectname = function(name1){
     self.selectedname(name1);
     if(self.newsFold())
     document.getElementById("dpnamelist").classList.remove('show');
     if(self.compFold())
     document.getElementById("dpnamelist1").classList.remove('show');
     if(self.spskFold())
     document.getElementById("dpnamelist4").classList.remove('show');
   };
   self.selectcard = function(card1){
       self.selectedcard(card1);
     document.getElementById("dpcardlist").classList.remove('show');
   };
   self.selectskill = function(skill1){
       self.selectedsk(skill1);
     document.getElementById("dpsklist").classList.remove('show');
   };
   self.selectskill1 = function(skill1){
       self.selectedsk(skill1);
     document.getElementById("dpsklist1").classList.remove('show');
   };
   self.dataFold = ko.observable(false);
   self.newsFold = ko.observable(true);
   self.compFold = ko.observable(true);
   self.spcFold = ko.observable(false);
   self.spskFold = ko.observable(false);
   self.raceFold = ko.observable(false);
   
   }
   
   ko.applyBindings(new ViewModel());
   

</script>