Как размещать легенды в единственной колонне графика торта и делать responsive?

У меня есть график торта в Chartjs, когда есть слишком много сегментов, создай 2 колонны и мне хотелось бы, что он сделал единственную колонну, и что он стал отвечающим совремнным требованиям, переделав график, если необходимо размещать scrollbar, так как он размещается, но я не нахожу, как размещение этого. Также redimensionar относительно разрешения, в котором загружается график.

Здесь код в jsfiddle (он имеет больше 30k букв и esSO он не позволяет это мне).

  • Это на большом экране

Esto en una pantalla grande

  • Если я это открываю на более маленьком экране, создаются 2 колонны

Si lo abro en una pantalla mas pequeña se crean 2 columnas

  • И если я это открываю на еще более маленьком экране, не виден график легендами

Y si lo abro en una pantalla aun mas pequeña no se ve la gráfica por las leyendas

Обновление 1: С помощью пользователя alcamalama ему удайтесь сделать следующее: ссылка, но мне не удается способствовать тому, чтобы в легендах он взял действие как взятие в Вашем нормальном состоянии (удалять сегменты торта и переделывать ее).

Проблема в моем Вебе состоит в том, что не размещаются цвета, и я не понимаю: Почему?.

error

6
задан 02.04.2019, 03:08
3 ответа

В тебе demo encontré следующие ошибки:

  • Снабжает ссылками в не определенное свойство : В l¦-nea 2021 прослеживается, что var ci = e.view.grafica_pie;, что вызывает, что ci undefined.

    soluci¦n состоит в том, чтобы использовать просто глобальную переменную grafica_pie;

  • Индекс в несуществующее свойство : В l¦-nea 2023 устанавливается, что var curr = ci.data.datasets[0]._meta[0].data[index];, то, что, введя sub-grÃ: fico закончись ошибкой, ввиду того, что ._meta[0] не всегда существует.

    soluci¦n состоит в том, чтобы использовать Object.keys на ._meta, чтобы получать договоренность со свойствами вышеупомянутого объекта и просить первую, а именно, Object.keys(grafica_pie.data.datasets[0]._meta)[0]

  • Markup invÃ: lido : В линии 13 из HTML не хватало закрывать один div.

  • Asignaci¦n событий : В линии 2018, устанавливают $("#js-legend > ul > li") то, что вызывает, что, обновив menú легенд, оно не функционирует больше.

    soluci¦n состоит в том, чтобы использовать Event delegation, а именно, $("#js-legend").on("click", 'ul > li',function(e){

Soluci¦n заверши ОБЩЕИЗВЕСТНЫЕ

: snippet внизу не является полным , переменная datos была изменена, потому что она слишком длинная и тело ответа ограничено 30000 символами .

Soluci¦n:

let datos = [{
    "id": 20,
    "nombre": "Infusiones",
    "id_padre": 0,
    "menu": [{
        "id": 188,
        "nombre": "Te",
        "precio": 5,
        "id_padre": 20,
        "cantidad": "4",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 189,
        "nombre": "Anis",
        "precio": 5,
        "id_padre": 20,
        "cantidad": "5",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 190,
        "nombre": "Manzanila",
        "precio": 5,
        "id_padre": 20,
        "cantidad": "4",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 191,
        "nombre": "Hierba luisa",
        "precio": 5,
        "id_padre": 20,
        "cantidad": "3",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 192,
        "nombre": "Cafe americano",
        "precio": 8,
        "id_padre": 20,
        "cantidad": "1",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 193,
        "nombre": "Cafe capuccion",
        "precio": 9,
        "id_padre": 20,
        "cantidad": "1",
        "promedio_ta": 0,
        "promedio_tp": 0
      }
    ],
    "cantidad": 18,
    "precio": 37,
    "promedio_ta": 0,
    "promedio_tp": 0
  },
  {
    "id": 28,
    "nombre": "Tiraditos",
    "id_padre": 0,
    "menu": [{
        "id": 83,
        "nombre": "Tiradito de pescado",
        "precio": 36,
        "id_padre": 28,
        "cantidad": "12",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 84,
        "nombre": "Tiradito de Gallese a dos tiempos",
        "precio": 38,
        "id_padre": 28,
        "cantidad": "7",
        "promedio_ta": 0.86,
        "promedio_tp": 0.86
      },
      {
        "id": 85,
        "nombre": "Tiradito mixto",
        "precio": 38,
        "id_padre": 28,
        "cantidad": "5",
        "promedio_ta": 0,
        "promedio_tp": 0
      }
    ],
    "cantidad": 24,
    "precio": 112,
    "promedio_ta": 0.86,
    "promedio_tp": 0.86
  },
  {
    "id": 54,
    "nombre": "Recomendacion del Chef",
    "id_padre": 0,
    "menu": [{
        "id": 315,
        "nombre": "corvina",
        "precio": 54,
        "id_padre": 54,
        "cantidad": "40",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 446,
        "nombre": "Parihuela De Cabrilla",
        "precio": 36,
        "id_padre": 54,
        "cantidad": null,
        "promedio_ta": null,
        "promedio_tp": null
      },
      {
        "id": 447,
        "nombre": "Sudado de Cabrilla",
        "precio": 36,
        "id_padre": 54,
        "cantidad": null,
        "promedio_ta": null,
        "promedio_tp": null
      },
      {
        "id": 448,
        "nombre": "Cabrilla Frita",
        "precio": 30,
        "id_padre": 54,
        "cantidad": null,
        "promedio_ta": null,
        "promedio_tp": null
      },
      {
        "id": 449,
        "nombre": "Cabrilla A Lo Macho",
        "precio": 36,
        "id_padre": 54,
        "cantidad": null,
        "promedio_ta": null,
        "promedio_tp": null
      }
    ],
    "cantidad": 40,
    "precio": 192,
    "promedio_ta": 0,
    "promedio_tp": 0
  },
  {
    "id": 44,
    "nombre": "Criollo",
    "id_padre": 0,
    "menu": [{
        "id": 117,
        "nombre": "Lomo fino saltado",
        "precio": 42,
        "id_padre": 44,
        "cantidad": "10",
        "promedio_ta": 2.7,
        "promedio_tp": 2.3
      },
      {
        "id": 118,
        "nombre": "Arroz chaufa de pollo",
        "precio": 26,
        "id_padre": 44,
        "cantidad": "21",
        "promedio_ta": 0.71,
        "promedio_tp": 0.48
      },
      {
        "id": 120,
        "nombre": "Tacu tacu con lomo fino saltado",
        "precio": 42,
        "id_padre": 44,
        "cantidad": "11",
        "promedio_ta": 1.64,
        "promedio_tp": 1.09
      },
      {
        "id": 121,
        "nombre": "Tacu tacu con pollo a la plancha",
        "precio": 30,
        "id_padre": 44,
        "cantidad": "5",
        "promedio_ta": 3.4,
        "promedio_tp": 2.2
      },
      {
        "id": 124,
        "nombre": "Pollo a la plancha con papas fritas y ensalada",
        "precio": 26,
        "id_padre": 44,
        "cantidad": "37",
        "promedio_ta": 1.65,
        "promedio_tp": 1.27
      },
      {
        "id": 125,
        "nombre": "Tacu tacu con pescado a la plancha",
        "precio": 36,
        "id_padre": 44,
        "cantidad": "8",
        "promedio_ta": 1.5,
        "promedio_tp": 0.13
      },
      {
        "id": 126,
        "nombre": "Parrilla marina",
        "precio": 48,
        "id_padre": 44,
        "cantidad": "2",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 127,
        "nombre": "Brochetas de pescado",
        "precio": 48,
        "id_padre": 44,
        "cantidad": "2",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 128,
        "nombre": "Milanesa de pollo y/o pescado",
        "precio": 36,
        "id_padre": 44,
        "cantidad": "6",
        "promedio_ta": 5.33,
        "promedio_tp": 3.83
      },
      {
        "id": 864,
        "nombre": "milanesa de pollo  personal",
        "precio": 36,
        "id_padre": 44,
        "cantidad": null,
        "promedio_ta": null,
        "promedio_tp": null
      },
      {
        "id": 865,
        "nombre": "milanesa de pescado personal",
        "precio": 36,
        "id_padre": 44,
        "cantidad": null,
        "promedio_ta": null,
        "promedio_tp": null
      }
    ],
    "cantidad": 102,
    "precio": 406,
    "promedio_ta": 16.93,
    "promedio_tp": 11.3
  },
  {
    "id": 43,
    "nombre": "Parihuelas",
    "id_padre": 0,
    "menu": [{
        "id": 114,
        "nombre": "parihuela de pescado mixto",
        "precio": 34,
        "id_padre": 43,
        "cantidad": "69",
        "promedio_ta": 1.49,
        "promedio_tp": 0.65
      },
      {
        "id": 115,
        "nombre": "parihuela de chita",
        "precio": 56,
        "id_padre": 43,
        "cantidad": "13",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 116,
        "nombre": "Parihuela de tramboyo",
        "precio": 46,
        "id_padre": 43,
        "cantidad": "19",
        "promedio_ta": 1.89,
        "promedio_tp": 1.11
      },
      {
        "id": 868,
        "nombre": "parihuela tramboyo natural",
        "precio": 40,
        "id_padre": 43,
        "cantidad": "1",
        "promedio_ta": 21,
        "promedio_tp": 20
      }
    ],
    "cantidad": 102,
    "precio": 176,
    "promedio_ta": 24.38,
    "promedio_tp": 21.76
  },
  {
    "id": 46,
    "nombre": "Guarniciones",
    "id_padre": 0,
    "menu": [{
        "id": 134,
        "nombre": "Arroz blanco",
        "precio": 6,
        "id_padre": 46,
        "cantidad": "80",
        "promedio_ta": 0.61,
        "promedio_tp": 0.25
      },
      {
        "id": 135,
        "nombre": "Camote",
        "precio": 6,
        "id_padre": 46,
        "cantidad": "18",
        "promedio_ta": 0.17,
        "promedio_tp": 0.11
      },
      {
        "id": 136,
        "nombre": "Cancha",
        "precio": 6,
        "id_padre": 46,
        "cantidad": "8",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 137,
        "nombre": "Chifle",
        "precio": 6,
        "id_padre": 46,
        "cantidad": "7",
        "promedio_ta": 0.29,
        "promedio_tp": 0
      },
      {
        "id": 138,
        "nombre": "Yucas fritas",
        "precio": 6,
        "id_padre": 46,
        "cantidad": "13",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 139,
        "nombre": "Papas fritas",
        "precio": 6,
        "id_padre": 46,
        "cantidad": "4",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 862,
        "nombre": "yucas  sancochadas",
        "precio": 6,
        "id_padre": 46,
        "cantidad": "1",
        "promedio_ta": 5,
        "promedio_tp": 4
      }
    ],
    "cantidad": 131,
    "precio": 42,
    "promedio_ta": 6.07,
    "promedio_tp": 4.36
  },
  {
    "id": 45,
    "nombre": "Platos Kids",
    "id_padre": 0,
    "menu": [{
        "id": 129,
        "nombre": "Chicharron de pescado kids",
        "precio": 20,
        "id_padre": 45,
        "cantidad": "56",
        "promedio_ta": 0.46,
        "promedio_tp": 0.29
      },
      {
        "id": 130,
        "nombre": "Cebiche de pescado kids",
        "precio": 20,
        "id_padre": 45,
        "cantidad": "53",
        "promedio_ta": 0.64,
        "promedio_tp": 0.42
      },
      {
        "id": 131,
        "nombre": "Chicharron de pollo kids",
        "precio": 20,
        "id_padre": 45,
        "cantidad": "19",
        "promedio_ta": 0.37,
        "promedio_tp": 0.21
      },
      {
        "id": 132,
        "nombre": "Pechuga de pollo baby",
        "precio": 20,
        "id_padre": 45,
        "cantidad": "5",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 133,
        "nombre": "Milanesa de pollo kids",
        "precio": 20,
        "id_padre": 45,
        "cantidad": "7",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 436,
        "nombre": "Milanesa de pescado kids",
        "precio": 20,
        "id_padre": 45,
        "cantidad": "10",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 21,
        "nombre": "Nuestra Barra",
        "id_padre": 45,
        "menu": [{
            "id": 194,
            "nombre": "Pisco sour",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "44",
            "promedio_ta": 0.09,
            "promedio_tp": 0
          },
          {
            "id": 196,
            "nombre": "Maracuya sour",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "21",
            "promedio_ta": 2.05,
            "promedio_tp": 0
          },
          {
            "id": 197,
            "nombre": "Chilcano de pisco",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "13",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 198,
            "nombre": "Machupicchu",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "11",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 199,
            "nombre": "Chilcano de maracuya",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "13",
            "promedio_ta": 0.15,
            "promedio_tp": 0
          },
          {
            "id": 200,
            "nombre": "pina colada",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "6",
            "promedio_ta": 1,
            "promedio_tp": 0
          },
          {
            "id": 201,
            "nombre": "Mojito",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "4",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 202,
            "nombre": "Cuba libre",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "5",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 203,
            "nombre": "Daiquiri de durazno",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "5",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 204,
            "nombre": "Algarrobina",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "8",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 205,
            "nombre": "Amor en llamas",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "4",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 206,
            "nombre": "Esmeralda",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "4",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 207,
            "nombre": "Bon ami",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "4",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 208,
            "nombre": "Peru libre",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "4",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 209,
            "nombre": "Laguna azul",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "5",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 210,
            "nombre": "Sangria especial",
            "precio": 24,
            "id_padre": 21,
            "cantidad": "5",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 211,
            "nombre": "Vino ocucaje jarra",
            "precio": 24,
            "id_padre": 21,
            "cantidad": "4",
            "promedio_ta": 0,
            "promedio_tp": 0
          },
          {
            "id": 316,
            "nombre": "Happy hour 2 x 1",
            "precio": 18,
            "id_padre": 21,
            "cantidad": "8",
            "promedio_ta": 0,
            "promedio_tp": 0
          }
        ],
        "cantidad": 168,
        "precio": 336,
        "promedio_ta": 3.29,
        "promedio_tp": 0
      }
    ],
    "cantidad": 150,
    "precio": 120,
    "promedio_ta": 1.47,
    "promedio_tp": 0.92
  },
  {
    "id": 23,
    "nombre": "Pescados",
    "id_padre": 0,
    "menu": [{
        "id": 61,
        "nombre": "Pescado a la plancha",
        "precio": 30,
        "id_padre": 23,
        "cantidad": "100",
        "promedio_ta": 1.38,
        "promedio_tp": 1.08
      },
      {
        "id": 62,
        "nombre": "Chita frita",
        "precio": 52,
        "id_padre": 23,
        "cantidad": "18",
        "promedio_ta": 0.94,
        "promedio_tp": 0.67
      },
      {
        "id": 63,
        "nombre": "Pescado al ajo (filete)",
        "precio": 32,
        "id_padre": 23,
        "cantidad": "20",
        "promedio_ta": 0.7,
        "promedio_tp": 0.6
      },
      {
        "id": 86,
        "nombre": "Pescado frito(Filete)",
        "precio": 28,
        "id_padre": 23,
        "cantidad": "56",
        "promedio_ta": 0.95,
        "promedio_tp": 0.39
      },
      {
        "id": 87,
        "nombre": "Pescado a lo macho(filete)",
        "precio": 36,
        "id_padre": 23,
        "cantidad": "11",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 88,
        "nombre": "Chita a lo macho(500gr) o segun peso",
        "precio": 56,
        "id_padre": 23,
        "cantidad": "6",
        "promedio_ta": 0,
        "promedio_tp": 0
      },
      {
        "id": 89,
        "nombre": "Chita al ajo",
        "precio": 54,
        "id_padre": 23,
        "cantidad": "10",
        "promedio_ta": 0,
        "promedio_tp": 0
      }
    ],
    "cantidad": 221,
    "precio": 288,
    "promedio_ta": 3.97,
    "promedio_tp": 2.74
  }
];

var graphColors = [];
var graphOutlines = [];
var hoverColor = [];

var internalDataLength = datos.length;
i = 0;
while (i <= internalDataLength) {
  var randomR = Math.floor((Math.random() * 130) + 100);
  var randomG = Math.floor((Math.random() * 130) + 100);
  var randomB = Math.floor((Math.random() * 130) + 100);

  var graphBackground = "rgb(" +
    randomR + ", " +
    randomG + ", " +
    randomB + ")";
  graphColors.push(graphBackground);

  var graphOutline = "rgb(" +
    (randomR - 80) + ", " +
    (randomG - 80) + ", " +
    (randomB - 80) + ")";
  graphOutlines.push(graphOutline);

  var hoverColors = "rgb(" +
    (randomR + 25) + ", " +
    (randomG + 25) + ", " +
    (randomB + 25) + ")";
  hoverColor.push(hoverColors);

  i++;
};

let array_cantidad_ventas_pie = [];
let grafica_pie = null;
let array_padre_f = [];

var grafica_cantidad_ventas_pie = function(datos) {
  //console.log('datos->',datos);
  if ((datos['menu']) || (datos['menu'] != 'undefined')) {
    datos = datos.sort(function(a, b) {
      return parseFloat(a['cantidad']) - parseFloat(b['cantidad']);
    });
    let labels = [];
    let data = [];
    let datalabels = [];
    $.each(datos, function(index, value) {
      labels.push(value['nombre']);
      data.push(value['cantidad']);
      datalabels.push(value);
    });
    if (grafica_pie) {
      grafica_pie.destroy();
    }

    let chart_cv = document.getElementById("chart_cant_ventas");
    grafica_pie = new Chart(chart_cv, {
      type: 'pie',
      data: {
        labels: labels,
        datasets: [{
          label: "Population (millions)",
          data: data,
          datalabels: datalabels,
          backgroundColor: graphColors,
          hoverBackgroundColor: hoverColor,
          borderColor: graphOutlines,
        }]
      },
      options: {
        responsive: false,
        legend: false,
        legendCallback: function(grafica_pie) {
          var ul = document.createElement('ul');
          ul.className = "pie-legend";
          grafica_pie.data.labels.forEach(function(label, index) {
            ul.innerHTML += "<li><span style='background-color: " + grafica_pie.data.datasets[0].backgroundColor[index] + "; border-color: " + grafica_pie.data.datasets[0].borderColor[index] + "; border-style: solid; border-width: 1px;'></span>" + label + "</li>"; // ^ ES6 Template String
          });

          return ul.outerHTML;
        },
        title: {
          display: true,
          text: 'Cantidad de ventas por producto',
        },
        events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'mouseup'],
        onClick: function(e, dataAtClick) {
          if (dataAtClick != null && dataAtClick.length > 0) {
            var index = dataAtClick[0]["_index"];
            var objData = this.data.datasets[0].datalabels[index];

            var e = e || window.event;
            var btnCode;

            if ('object' === typeof e) {
              btnCode = e.button;

              switch (btnCode) {
                case 0:
                  if (objData['menu']) {
                    grafica_cantidad_ventas_pie(objData['menu']);
                  }
                  break;

                case 1:
                  grafica_cantidad_ventas_pie(array_padre_f);
                  break;

                case 2:
                  if (objData['id_padre'] !== 0) {
                    buscarPadres(array_cantidad_ventas_pie, objData['id_padre'], array_cantidad_ventas_pie);
                    grafica_cantidad_ventas_pie(array_padre_f);
                  }
                  break;

                default:
                  grafica_cantidad_ventas_pie(array_padre_f);
              }
            }
          }
        }
      }
    });
    document.getElementById('js-legend').innerHTML = grafica_pie.generateLegend();
  }
}

function buscarPadres(array, id, array_padre) {
  $.each(array, function(key, value) {
    if (value['id'] == id) {
      array_padre_f = array_padre;
      return false;
    } else {
      if (value['menu']) {
        buscarPadres(value['menu'], id, value['menu']);
      }
    }
  });
}

array_cantidad_ventas_pie = datos;
grafica_cantidad_ventas_pie(array_cantidad_ventas_pie);

$("#js-legend").on("click", 'ul > li', function(e) {
  var index = $(this).index();
  $(this).toggleClass("strike");

  var metas = Object.keys(grafica_pie.data.datasets[0]._meta);
  var curr = grafica_pie.data.datasets[0]._meta[metas[0]].data[index];
  curr.hidden = !curr.hidden
  grafica_pie.update();
});
.chart-legend li span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

.chart-legend {
  height: 250px;
  overflow: auto;
}

.chart-legend li {
  cursor: pointer;
}

.strike {
  text-decoration: line-through !important;
}

.float-left {
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js"></script>

<section class="graficas">
  <div class="float-left">
    <div class="float-left" style="width:70%">
      <canvas id="chart_cant_ventas" width="500" height="300" oncontextmenu="event.preventDefault();"></canvas>
    </div>
    <div class="float-left" style="width:30%">
      <div id="js-legend" class="chart-legend"></div>
    </div>
  </div>
</section>
13
ответ дан 19.11.2019, 21:21
  • 1
    Я увидел решение, которое ты предлагаешь, и идут мои +1 (хороший ответ), но было бы хорошим, что, если бы ты разместил snippet, что такой, если к переменной datos ты сводишь количество реестра, этой формы, ты сможешь размещать код, и он не остается во внешней ссылке, которая со временем может теряться. – Orlando De La Rosa 02.04.2019, 07:14
  • 2
    Если я использую legendCallback, не показывает мне цвета в легендах захватил . Если я удаляю legendCallback, показывает этот способ . – Pablo Contreras 02.04.2019, 09:26
  • 3
    @OrlandoDeLaRosa, очень удачная твой observació n, спасибо! Я обновил мой ответ – Marcos 03.04.2019, 08:15
  • 4
    @PabloContreras, será что ты забыл копировать стили, которые затрагивают span внутри? Я имею в виду пунктуально стиль .chart-legend li span – Marcos 03.04.2019, 08:21

Según объясняют в documentaci¦n Chart.js tamaño renderizaci¦n canvas , где он является grÃ: fica не возможно изменять посредством относительных признаков, из-за этого они показывают, что правильное состоит в том, чтобы вводить canvas в одном div, posici¦n которого и tamaño они были касающимися resoluci¦n экрана:

<div class="chart-container" style="position: relative; height:40vh; width:80vw"> <canvas id="chart"></canvas> </div>

В твоем случае я бросил беглый взгляд в c¦digo и продолжая эти инструкции - añadido один div содержа твой grÃ: fica, ademÃ: s я нуждался añadir в следующем l¦-nea c¦digo в выборах grÃ: fica: maintainAspectRatio: false

С этим soluci¦n показывает себе grÃ: fica всегда с тем же самым tamaño независимо от resoluci¦n экрана, из-за которого, если эта очень pequeña aparecerÃ: так вертикальный scroll как горизонтальный, не, если это serÃ: недостаток, но я не достиг то, что grÃ: fica уменьшите Ваш tamaño, не меняясь número колонн.

Соединение с c¦digo:
https://jsfiddle.net/93f6r2nc /

Ссылок:
https://www.chartjs.org/docs/latest/general/responsive.html

3
ответ дан 19.11.2019, 21:21
  • 1
    Спасибо за твой colaboració n, интересное знание это responsive, будь хорошо, осталось ясным это. Но я хочу легенды в единственной колонне с scroll, ú nico, что со мной случается, он состоит в том, чтобы размещать их в div, но не, как то, чтобы брать это событие. – Pablo Contreras 01.04.2019, 09:54
  • 2
    Уже я понимаю, он думал, что ты referí схвати, чему всегда покажут в единственной колонне легенда независимо от tamañ или grá fica. Pensaré solució n, хотя это осложняет значительно вещи, так как легенда рисует сам canvas и не, если será возможный соглашаться на нее. – alcamalama 01.04.2019, 10:14
  • 3
    Вопрос, очень сходный с твоей está решенная в этом соединении, если ты хочешь бросить беглый взгляд: stackoverflow.com/questions/43229626/… – alcamalama 01.04.2019, 10:36
  • 4
    Мне не удается принести это в пример моего có я говорю, обновите мой вопрос. – Pablo Contreras 01.04.2019, 14:36

То, что ты можешь делать, состоит в том, чтобы использовать ее funciГіn legendCallback из chartJS, что он делает, состоит в том, чтобы создавать твои legends вводя html, костлявая, что ты можешь настраивать их в твой вкус и добавлять их css, преимущество этого состоит в том, что ты решаешь добавить, где твои legends, в случае моего примера, я поместил один div вместе с canvas внутри этого div, я ввел legends и оставил canvas только с нею grГЎfica.

AquГ - мой пример, взятый на основании твоего, я надеюсь, что то, в чем ты нуждаешься:

https://jsfiddle.net/vd3m8r6w/1 /

(Я ввел fiddle, из-за которого cГіdigo на изюме линии, позволенные в snipped).

3
ответ дан 19.11.2019, 21:21
  • 1
    ¿ Как podrí чтобы поддерживать acció n легенды? Та, которая снимает один из сегментов, нажав на какую-либо из статей. – Pablo Contreras 01.04.2019, 13:49
  • 2
    Сомнение относительно этого события click, когда ты нажимаешь на какую-то легенду, ты, должно быть, грузит дети этого отца? или что был бы должен делать? – Ricardo Pérez 01.04.2019, 15:01
  • 3
    Нет, та же acció n легенды первоначального chartjs, удалять сегменты. – Pablo Contreras 01.04.2019, 16:00
  • 4
    Edité мой fiddle, это - то, что ты ищешь? – Ricardo Pérez 01.04.2019, 17:34