问chartjs-plugin-zoom:在页面首次加载时获取当前可见的值
EN

Stack Overflow用户

提问于 2021-08-16 19:33:55

回答 1查看 43关注 0票数 0

我有一个名为genStarts的图表组件，它的视图依赖于以下图表(singleChart)的可视数据。我使用onZoomComplete和onPanComplete选项来插入我的getVisibleValues函数，以便可以在缩放和平移时更新genStarts。但是，当页面第一次启动时，我无法获得当前可见的值。我的getVisibleValues函数不能在chartStyle对象之外工作，而且我还没有找到在启动时执行的图表选项。

换句话说，只有在缩放或平移SingleChart时，才会填充我的genStarts图，但我希望立即填充它。

const SingleChart = React.memo(({ setVisible }) => {

  function getVisibleValues({ chart }) {
    setVisible(chart.scales.x.ticks);
  }
  const chartStyle = {
    options: {
      animation: false,
      maintainAspectRatio: false,
      responsive: true,
      plugins: {
        zoom: {
          zoom: {
            wheel: {
              enabled: true,
              modifierKey: "shift",
            },
            pinch: {
              enabled: true,
            },
            enabled: true,
            drag: true,
            mode: "x",
            onZoomComplete: getVisibleValues,
          },
          pan: {
            enabled: true,
            mode: "x",
            speed: 2,
            onPanComplete: getVisibleValues,
          },
          mode: "xy",
        },
        legend: {
          display: false,
        },
      },

      scales: {
        y: {
          type: "linear",
          display: "true",
          position: "left",
          grid: {
            drawBorder: true,
            color: "#000000",
          },
          ticks: {
            beginAtZero: true,
            color: "#000000",
          },
          title: {
            display: yAxisLabel != "",
            text: yAxisLabel,
          },
        },

        x: {
          max: 9,
          grid: {
            drawBorder: true,
            color: "#00000",
          },
          ticks: {
            beginAtZero: false,
            color: "#000000",
          },
        },
      },
    },
  };

 // ... some code to get chartData

  return (
    <div>
      <Line
        data={chartData}
        options={chartStyle.options}
        width={20}
        height={195}
      />
    </div>
  );
});

export default SingleChart;

reactjs

chart.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-17 01:13:23

你可以使用动画，它们有一个属性来检查它是否是第一次触发，尽管由于你不想要动画，你需要将main设置为一个非常低的数字，至少将工具提示设置为false，并将活动元素的过渡持续时间设置为0。

const getVisibleValues = ({
  chart
}) => {
  console.log(chart.scales.x.ticks.map(el => ({
    value: el.value,
    label: el.label
  }))) // Map because stack console prints whole circular context which takes long time
}

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    animation: {
      onComplete: (ani) => {
        if (ani.initial) {
          getVisibleValues(ani)
        }
      },
      duration: 0.0001
    },
    transitions: {
      active: {
        animation: {
          duration: 0
        }
      }
    },
    plugins: {
      tooltip: {
        animation: false
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68808328

复制

相似问题

问chartjs-plugin-zoom:在页面首次加载时获取当前可见的值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问chartjs-plugin-zoom:在页面首次加载时获取当前可见的值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问chartjs-plugin-zoom:在页面首次加载时获取当前可见的值
EN