图表 chartjs - 其他笔记

(function () {
  "use strict";
  var type = "line"; // bar horizontalBar radar pie(饼图) doughnut(饼图)
  var data = {
    labels: ["a", "b", "c"],
    datasets: [
      {
        label: "name1",
        data: [100, 200, 300],
        borderColor: "red",
        borderWidth: 3,
        fill: false,
        backgroundColor: "rgba(128,0,0,0.5)", // 可数组
        lineTension: 0, // 曲度
        pointStyle: "rect", // circle cross crossRot dash line rectRounded rectRot star triangle
        pointRadius: 8,
        type: "line",
        yAxisID: "name1-axes", // 线棒组合
      },
      {
        label: "name2",
        data: [50, 100, 150],
        type: "bar", // 线棒组合
        yAxisID: "name2-axes", // 线棒组合
      },
    ],
  };
  var options = {
    scales: {
      yAxes: [
        {
          stacked: true, // 线棒组合
          ticks: {
            min: 0,
            max: 2000,
            suggestedMin: 0,
            suggestedMax: 2000,
            stepSize: 400,
            callback: function (value, index, values) {
              return value + "unit";
            },
          },
        },
        {
          id: "name1-axes",
          type: "linear",
          position: "left", // 线棒组合
          ticks: { min: 0, max: 1800 },
        },
        {
          id: "name2-axes",
          type: "linear",
          position: "right", // 线棒组合
          ticks: { min: 0, max: 800 },
          gridLines: { display: false }, // 线棒组合
        },
      ],
      xAxes: [{ stacked: true }],
    },
    title: {
      display: true,
      text: "title",
      fontColor: "green",
      fontSize: "24",
      position: "top", // left bottom right
    },
    legend: { position: "right", diaplay: true },
    animation: { duration: 1000, easing: "easeOutQuart" },
    cutoutPercentage: 20, // 饼图
  };
  var ctx = document.getElementById("myChart").getContext("2d");
  var chart = new Chart(ctx, { type: type, data: data, options: options });
  // <script src="/chartjs/Chart.bundle.js"></script>
  // <canvas id="myChart">图表区</canvas>
})();