Question

我的Chart.js图使用两个Y轴：它们都必须具有相同的比例和最大/最小值。我更新了第二个Y轴步骤，取决于我用dinamically设置的布尔值，一切都完美无缺。不过，当我触发一个图例事件（点击其中一个图例）时，我想要更新第二个Y轴（重绘它）。我无法真正发挥作用：情节刷新，但我的第二个Y轴步骤并没有改变。

这是我的绘画功能。我已经阅读了我发现here的Chart.js文档，但我真的能理解如何填充我的传奇onClick事件。

const httpRequest = async arr => {
  return await axios.post(url, {
    keys: JSON.stringify(arr)
  });
}

// ids is an array of 25000+ strings
const batchRequest = async (ids) => {
  const batch = [];
  // Leave array ids from source immutable, clone it
  const cloneSource = Array.from(ids);

  let lengthOfIds = ids.length;

  while (cloneSource.length > 0) {
    // Break off the ids into separate arrays
    const sliced = cloneSource.slice(lengthOfIds - 1000, lengthOfIds);

    batch.push(sliced);
    // Reduce length, to make sure there are no duplicates
    lengthOfIds -= 1001;

    if (cloneSource.length === 1) {
      batch.push(cloneSource.splice(0, 1))
      break;
    }
  }

  const mapFetches = await Promise.all(httpRequest);
  return [
    mapFetches.reduce((acc, curr) => [...acc, ...curr.data], [])
  ];
}

Answer 1

我找到了自己的方式。这里有一个代码片段，可以解决同样的问题：

onClick: function(event, legendItem) {
    let index = 1;

    myChart.data.datasets[index].hidden = !myChart.data.datasets[index].hidden;

    if (myChart.data.datasets[index].hidden) {
        myChart.options.scales.yAxes[index].ticks.max = maxY;
        myChart.options.scales.yAxes[index].ticks.min = minY;
        myChart.options.scales.yAxes[index].ticks.stepSize = stepSize;

    } else {
        if (stepResult === 0) {
            myChart.options.scales.yAxes[index].ticks.max = 3.5;
            myChart.options.scales.yAxes[index].ticks.min = 0;
            myChart.options.scales.yAxes[index].ticks.stepSize = 0.5;
        }
    }

    myChart.update();
}

Chart.js：在图例点击时刷新第二个Y轴步骤

1 个答案: