chart.js 相关问题

Chart.js是一个JavaScript库，用于创建包含在网页上的动画交互式图形

ChartJs 在创建雷达时不起作用

我创建了一个虚拟雷达字符，它说了一个错误。他们提供的文档中使用了基本代码：导入图表，{填充，LineElement，PointElement，RadialLinearScale}...

reactjs typescript chart.js

回答 0 投票 0

ChartJS 中的两个 Y 轴条形图

我创建了一个双 Y 轴条形图，数据和轴显示正确，但是，两个轴都位于图的左侧。我放置了两个 Y 轴的位置，但我不知道 w...

reactjs chart.js bar-chart codepen

回答 0 投票 0

React 和 Chart.js 显示获取的数据

我在理解如何使用 chart.js 获取要显示在图表上的数据时遇到问题 const [backendData, setBackendData] = useState([{}]) 使用效果（（）=> { Axios.get('ht...

javascript reactjs chart.js

回答 1 投票 0

如何更改 Chart.js 中特定 y 轴的颜色？

我正在使用 Chart.js 创建一个折线图，显示两个具有不同 y 轴的数据集。我想更改其中一个 y 轴的颜色，x 轴包含开始的测试编号 ...

reactjs chart.js react-chartjs react-chartjs-2

回答 1 投票 0

来自 api 的数据未显示在 ChartJS 中

`'从'react'导入React，{useState，useEffect}； import { Chart as ChartJS, BarElement } from 'chart.js/auto'; 从'react-chartjs-2'导入{Bar}； ChartJS.register( 条形元素， ); const 栏...

javascript reactjs api chart.js

回答 0 投票 0

Thymeleaf th:每次循环渲染一个图表js条形图

这是我最后一次尝试。我已经遇到这个问题好几个星期了，但没有运气。我有一个带有 thymeleaf 的 spring crud 应用程序，用于圆盘高尔夫应用程序。您可以添加课程，然后为登录的人添加轮次...

javascript html spring-boot chart.js thymeleaf

回答 0 投票 0

有没有办法在不旋转整个画布的情况下旋转画布的背景图像？看例子

这是一个粗略的示例，但想在不旋转圆环图的情况下随着鼠标移动来移动针图像。或者有更好的方法来处理它吗？ HTML: 这是一个粗略的示例，但想在不旋转圆环图的情况下随着鼠标移动来移动针图像。或者有更好的方法来处理它吗？ html: <canvas id="myChart" style="background:url('https://th.bing.com/th/id/R.2db409a16ede3960a7b29d352023f96b?rik=fmfST8altAgOzw&riu=http%3a%2f%2fwww.clker.com%2fcliparts%2fM%2fx%2fk%2f6%2fA%2fw%2fred-compass-needle-hi.png&ehk=lc9ZHlPQDSYqkD9apB6GLPDGgANmGVqnzx05ht2zekw%3d&risl=&pid=ImgRaw&r=0')no-repeat center; background-size:auto 30%; " height="100"></canvas> 剧本： var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Red", "Blue", "Yellow"], datasets: [{ label: '# of Votes', data: [12, 19, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }, options: { tooltips: { callbacks: { title: function(tooltipItem, data) { return data['labels'][tooltipItem[0]['index']]; }, label: function(tooltipItem, data) { return data['datasets'][0]['data'][tooltipItem['index']]; }, afterLabel: function(tooltipItem, data) { var dataset = data['datasets'][0]; var percent = Math.round((dataset['data'][tooltipItem['index']] / dataset["_meta"][0]['total']) * 100) return '(' + percent + '%)'; } }, backgroundColor: '#FFF', titleFontSize: 16, titleFontColor: '#0066ff', bodyFontColor: '#000', bodyFontSize: 14, displayColors: false } } }); var img = $('#myChart'); if (img.length > 0) { var offset = img.offset(); function mouse(evt) { var center_x = (offset.left) + (img.width() / 2); var center_y = (offset.top) + (img.height() / 2); var mouse_x = evt.pageX; var mouse_y = evt.pageY; var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); var degree = (radians * (180 / Math.PI) * -1) + 90; img.css('-moz-transform', 'rotate(' + degree + 'deg)'); img.css('-webkit-transform', 'rotate(' + degree + 'deg)'); img.css('-o-transform', 'rotate(' + degree + 'deg)'); img.css('-ms-transform', 'rotate(' + degree + 'deg)'); } $(document).mousemove(mouse); } <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="myChart" style="background:url('https://th.bing.com/th/id/R.2db409a16ede3960a7b29d352023f96b?rik=fmfST8altAgOzw&riu=http%3a%2f%2fwww.clker.com%2fcliparts%2fM%2fx%2fk%2f6%2fA%2fw%2fred-compass-needle-hi.png&ehk=lc9ZHlPQDSYqkD9apB6GLPDGgANmGVqnzx05ht2zekw%3d&risl=&pid=ImgRaw&r=0')no-repeat center; background-size:auto 30%; " height="100"></canvas> https://jsfiddle.net/wtzj4fhr/

javascript jquery canvas chart.js

回答 0 投票 0

chart.js 提交数据创建条形图时不渲染

chart.js 在提交数据以创建条形图时不呈现。我之前曾尝试使用 chart.js 版本 2.9.4 测试条形图生成（如果使用其他版本，图表将不会显示。...

canvas html5-canvas chart.js jinja2

回答 0 投票 0

Chart.js - 包含输入值的堆积条形图

我正在尝试使用 chart.js 绘制图表。只有两个值的垂直堆叠条形图。当我将数字硬编码为数据时，图表按预期工作。但是，我想获得 ...

javascript chart.js

回答 1 投票 0

带有缩放插件的Chartjs，如何在图表上设置限制数据显示

我使用 Angular v13 和 chartjs v3，我还安装了 chartjs-plugin-zoom，它非常适合条形图，但对于时间条形图，它没有按预期工作，这是我的问题：当我得到...