是否可以在reactjs中使用highcharts3d的三重立体效果?如果没有highcharts3d中立体效果的替代方法?

lymnna71  于 2023-02-03  发布在  React
关注(0)|答案(1)|浏览(124)

我有highcharts3d,我想用highcharts3d实现立体效果
下面的代码是工作组件,你可以复制粘贴此代码到任何reactJS应用程序唯一的事情是不工作,在下面的例子是浮雕效果.
期待一些建议或更改的基础上,我目前的代码提前感谢。

import React, { useState, useEffect, useRef } from 'react';
import * as THREE from 'three';
import { AnaglyphEffect } from 'three/examples/jsm/effects/AnaglyphEffect.js'
import HighchartsReact from 'highcharts-react-official'
import Highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
import highchartsMore from 'highcharts/highcharts-more'
highcharts3d(Highcharts)
highchartsMore(Highcharts)

const HighChart = () => {
  const chartRef = useRef(null)
  const [chartOptions] = useState({
    chart: {
      type: "column",
      options3d: {
        enabled: true,
      },
      events: {
        render: (event) => {
          event.target.reflow()
        },
      },
    },
    title: {
      text: '3D Chart',
    },
    accessibility: {
      enabled: false,
    },        
    series: [
      {
        data: [
          49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
          95.6, 54.4,
        ],
      },
    ]
  })

  useEffect(() => {
    // const container = document.createElement('div');
    const container = document.querySelector('.highcharts-container')
    let camera, scene, renderer, effect;

    init()
    animate()

    function init() {

      camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        0.01,
        100,
      )
      camera.position.z = 3
      camera.focalLength = 3

      scene = new THREE.Scene()

      renderer = new THREE.WebGLRenderer()
      renderer.setPixelRatio(window.devicePixelRatio)
      container.appendChild(renderer.domElement)
      // chartRef.current.appendChild(renderer.domElement) // This line is giving error

      const width = window.innerWidth || 2
      const height = window.innerHeight || 2

      effect = new AnaglyphEffect(renderer)
      effect.setSize(width, height)

      window.addEventListener('resize', onWindowResize)
    }

    function animate() {
      requestAnimationFrame(animate)
      render()
    }

    function onWindowResize() {
      camera.aspect = window.innerWidth / window.innerHeight
      camera.updateProjectionMatrix()

      effect.setSize(window.innerWidth, window.innerHeight)
    }
    function render() {
      effect.render(scene, camera)
    }
  }, [])

  return (
    <div className="chartContainer" >
      <HighchartsReact
        highcharts={Highcharts}
        ref={chartRef}
        options={chartOptions}
        allowChartUpdate={true}
        containerProps={{ style: { width: '100%', height: '100%' } }}
      />
    </div>
  )
}

export default HighChart;
zf2sa74q

zf2sa74q1#

highcharts和threejs之间没有任何集成。然而,实现一个浮雕效果似乎真的很简单,例如通过复制数据。
例如:

const baseData = [1, 2, 3, 4, 5];
const distance = 0.05;
const anaglyphicData = [];
baseData.forEach((dataEl, index) => {
  anaglyphicData.push(
    [index, dataEl], {
      x: index - distance,
      y: dataEl + distance,
      color: 'rgba(255,0,0,0.5)'
    }
  );
});

Highcharts.chart('container', {
  ...,
  series: [{
    data: anaglyphicData,
    color: 'rgba(0,255,255,0.5)'
  }]
});

相关问题