Как определить масштаб, пока все наборы данных скрыты (chartjs)?

Question

Я использовал django и chartjs для рендеринга графиков.когда я использую функцию legend onclick, скрывающую весь набор данных, ось y будет отображаться так, пока я не хочу ничего показывать, даже линии сетки.

Это пример диаграммы:

Есть ли какое-либо решение или предложение?

Answer 1

Я следую предложению Дэниела и переписываю пользовательскую функцию onClick.Теперь он работает точно так, как я ожидал.

//start
const allHidden = ci.data.datasets.every((dataSet, index) => ci.getDatasetMeta(index).hidden)

const rightAxisDataSetsAllHidden = ci.data.datasets.every((dataSet, i) => {
if (ci.getDatasetMeta(i).yAxisID === "rightAxis") {
  if (ci.getDatasetMeta(i).hidden === null) {
    return false}
  else {
    return true
  }
}
else {
  return true
}})

const leftAxisDataSetsAllHidden = ci.data.datasets.every((dataSet, i) => {
if (ci.getDatasetMeta(i).yAxisID === "leftAxis") {
  if (ci.getDatasetMeta(i).hidden === null) {
    return false
  }
  else {
    return true
  }
}
else {
  return true
}})

if (ci.options.scales.yAxes.length != 1) {
  ci.options.scales.yAxes[0].display = !leftAxisDataSetsAllHidden
  ci.options.scales.yAxes[1].display = !rightAxisDataSetsAllHidden
}
else {
  ci.options.scales.yAxes[0].display = !leftAxisDataSetsAllHidden;
}
ci.options.scales.xAxes[0].display = !allHidden;
//end

Answer 2

Не зная точно, что вы хотите показать / скрыть, Я собрал пример , который скрывает оси x / y, когда все серии выключены.Для этого я следовал инструкциям в их документации о как написать обработчик onClick для легенды .

Вот соответствующий код для этого обработчика:

{
  ...
  options: {
    scales: {
        yAxes: [{
        display: true, // <-- Added to make sure property was in options to read
        ...
      }],
      xAxes: [{
        display: true // <-- Added to make sure property was in options to read
      }]
    },
    legend: {
      onClick: function (e, legendItem) {
        const index = legendItem.datasetIndex;
        const ci = this.chart;
        var meta = ci.getDatasetMeta(index);

        meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;

        /* Start: Custom code to handle the showing/hiding */
        const allHidden = ci.data.datasets.every((dataSet, index) => ci.getDatasetMeta(index).hidden);

        ci.options.scales.yAxes[0].display = !allHidden;
        ci.options.scales.xAxes[0].display = !allHidden;
        /* End: Custom code to handle the showing/hiding */

        // We hid a dataset ... rerender the chart
        ci.update();
      }
    }
  }
});