javascript - 使用 Chart.js 自定义图表图例

问题描述

我正在寻找开发以下类型的图表。

到目前为止，我已经取得了以下结果：

但我有以下问题，我不知道如何执行它们。

这些天有 2 个堆叠形式的条形图。这两张图的图例是相同的，所以我正在寻找它不要在顶部显示重复。这些代表一个百分比。
每个条形图都有一个名称：“Turn 1”和“Turn 2”，所以我希望它们能够在我将鼠标悬停在图表上时显示它们的相应值。
在“Y 轴”的右侧放置另一个文本，但这代表一个由黑线表示的整数。

我的源代码如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Ejemplo</title>
    <script src="https://www.chartjs.org/dist/2.9.4/Chart.min.js"></script>
    <style>
      canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
    </style>
  </head>
  <body>
    <div style="width: 75%">
      <canvas id="canvas"></canvas>
    </div>
    <script>
      var barChartData = {
        labels: [
          "Día 1",
          "Día 2",
          "Día 3",
          "Día 4",
          "Día 5",
          "Día 6",
          "Día 7",
          "Día 8",
          "Día 9",
          "Día 10",
        ],
        datasets: [
          {
            type: "line",
            label: "Toneladas Provisionales",
            borderColor: "#000000",
            backgroundColor: "#000000",
            borderWidth: 2,
            fill: false,
            data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
          },
          {
            label: "% UTILIZACION",
            backgroundColor: "#3393df",
            stack: "Turno 1",
            data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
          },
          {
            label: "% COLAS LARGAS",
            backgroundColor: "#e88967",
            stack: "Turno 1",
            data: [59, 10, 12, 8, 6, 17, 6],
          },
          {
            label: "% COLAS DESCARGA",
            backgroundColor: "#9d81bd",
            stack: "Turno 1",
            data: [10, 23, 13, 12, 8, 7, 11],
          },
          {
            label: "% TALLER",
            backgroundColor: "#b3b3b3",
            stack: "Turno 1",
            data: [19, 16, 10, 19, 18, 16, 11],
          },
          {
            label: "% STAND BY + PARALIZACIONES",
            backgroundColor: "#409640",
            stack: "Turno 1",
            data: [0, 23, 14, 11, 16, 7, 18],
          },
          {
            label: "% TURNOS 0 PRODUCCION",
            backgroundColor: "#ffdf00",
            stack: "Turno 1",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
          {
            label: "% UTILIZACION",
            backgroundColor: "#3393df",
            stack: "Turno 2",
            data: [12.8, 28.53, 50.34, 50.87, 51.51, 53.12, 54.59],
          },
          {
            label: "% COLAS LARGAS",
            backgroundColor: "#e88967",
            stack: "Turno 2",
            data: [59, 10, 12, 8, 6, 17, 6],
          },
          {
            label: "% COLAS DESCARGA",
            backgroundColor: "#9d81bd",
            stack: "Turno 2",
            data: [10, 23, 13, 12, 8, 7, 11],
          },
          {
            label: "% TALLER",
            backgroundColor: "#b3b3b3",
            stack: "Turno 2",
            data: [19, 16, 10, 19, 18, 16, 11],
          },
          {
            label: "% STAND BY + PARALIZACIONES",
            backgroundColor: "#409640",
            stack: "Turno 2",
            data: [0, 23, 14, 11, 16, 7, 18],
          },
          {
            label: "% TURNOS 0 PRODUCCION",
            backgroundColor: "#ffdf00",
            stack: "Turno 2",
            data: [0, 0, 0, 0, 0, 0, 0],
          },
        ],
      };
      var ctx = document.getElementById("canvas").getContext("2d");
      var canvas = new Chart(ctx, {
        type: "bar",
        data: barChartData,
        options: {
          title: {
            display: true,
            text:
              "Detalle de Tiempos de Utilización de Flota y Toneladas Transportadas por Turno del 1 al:",
          },
          legend: {
            display: true,
          },
          tooltips: {
            enabled: true,
          },
          responsive: true,
          scales: {
            xAxes: [
              {
                stacked: true,
              },
            ],
            yAxes: [
              {
                stacked: true,
                ticks: {
                  min: 0,
                  max: this.max, // Your absolute max value
                  callback: function (value) {
                    return ((value / this.max) * 100).toFixed(0) + "%"; // convert it to percentage
                  },
                },
                scaleLabel: {
                  display: true,
                  labelString: "Porcentaje",
                },
              },
            ],
          },
        },
      });
    </script>
  </body>
</html>

标签： javascriptchart.js

javascript - 使用 Chart.js 自定义图表图例

问题描述

解决方案

推荐阅读