hxp
2024-11-29 50dd27fc21d22e64d53f30f2f6dee7a9875ddb87
js/common.js
@@ -122,6 +122,21 @@
   }
}
function doSubmit(to, p, method='GET') { // to:提交动作(action),p:参数
   var myForm = document.createElement("form");
   myForm.method = method;
   myForm.action = to;
   for (var i in p) {
      var myInput = document.createElement("input");
      myInput.setAttribute("name", i); // 为input对象设置name
      myInput.setAttribute("value", p[i]); // 为input对象设置value
      myForm.appendChild(myInput);
   }
   document.body.appendChild(myForm);
   myForm.submit();
   document.body.removeChild(myForm); // 提交后移除创建的form
}
function random(min, max) {
   return Math.round(Math.random() * (max - min)) + min;
}
@@ -135,4 +150,88 @@
   isQuerying = true;
   document.getElementById(key).value = gt.gettext("查询中...");
   return true;
}
/**
 * 绘制曲线图
 * @param {*} chartID 图表ID,关联html中的元素ID
 * @param {*} chartText 图表总标题
 * @param {*} xText x轴文本, 如等级
 * @param {*} yText y轴文本, 如人数
 * @param {*} labels x轴刻度文本列表, 如 等级列表
 * @param {*} datasetDataList 数据表数据列表,即每条线的数据,线的数据长度必须与x轴刻度文本列表长度一致
 * @param {*} datasetLabList 数据表标题列表,即每条线的标题,有几条线的数据即有几个标题
 */
 function drawChart_Line(chartID, chartText, xText, yText, labels, datasetDataList, datasetLabList = []) {
   var backgroundColors = [
      'rgba(79, 66, 255, 0.2)',
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)'
   ];
   var borderColors = [
      'rgba(79, 66, 255, 1)',
      'rgba(255, 99, 132, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)'
   ];
   var colorIndex = 0;
   var datasets = [];
   for (let i = 0; i < datasetDataList.length; i++) {
      datasets.push({
         label: datasetLabList.length > i ? datasetLabList[i] : "",
         data: datasetDataList[i],
         backgroundColor: backgroundColors[colorIndex % backgroundColors.length],
         borderColor: borderColors[colorIndex % borderColors.length],
         borderWidth: 1,
         lineTension: 0.5,
         pointRadius: 1
      });
      colorIndex += 1;
   }
   var ctx = document.getElementById(chartID);
   ctx.width = 400;
   ctx.height = 100;
   var myLineChart = new Chart(ctx, {
      type: "line",
      data: {
         labels: labels,
         datasets: datasets
      },
      options: {
         plugins: {
            title: {
               display: true,
               text: chartText
            }
         },
         scales: {
            x: {
               title: {
                  display: true,
                  text: xText
               }
            },
            y: {
               title: {
                  display: true,
                  text: yText
               },
               beginAtZero: true,
               ticks: {
                  stepSize: 1, // 刻度间隔1
               }
            }
         }
      }
   });
}