我有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;
1条答案
按热度按时间zf2sa74q1#
highcharts和threejs之间没有任何集成。然而,实现一个浮雕效果似乎真的很简单,例如通过复制数据。
例如: