chart.js 相关问题

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

ChartJs 图表不会更新新值

首先，对于蹩脚的英语感到抱歉。我使用 ChartJS 生成图表有一段时间了，但今天我偶然发现了一个问题，我似乎找不到答案。我正在使用一个函数来...

javascript jquery chart.js chartjs-2.6.0

回答 4 投票 0

如何在Chart.js中创建这样的图表？

我正在尝试使用 Chart.js 创建此图表。挑战：正如您在 x 轴上看到的那样，是类别。我希望该点位于中间。我希望价值是最重要的。我的...

javascript chart.js

回答 1 投票 0

BarChartModel 如何仅调整条形宽度而不更改整个图表

我无法仅更改条形的宽度。现在，图表工作正常，但我只需要调整条形的宽度，而不更改整个图表。我怎样才能做到这一点？普...

css primefaces chart.js

回答 1 投票 0

如何在laravel中使用chartjs-plugin-zoom

我正在尝试在我的 laravel 应用程序中使用 Chartjs-plugin-zoom 的功能，但我无法让它工作。在刀片中，我通过 Cloudflare cdnjs 加载插件： <p>我正在尝试在我的 Laravel 应用程序中使用 <a href="https://www.chartjs.org/chartjs-plugin-zoom/latest/" rel="nofollow noreferrer">chartjs-plugin-zoom</a> 的功能，但我无法让它工作。</p> <p>在刀片中，我通过 Cloudflare cdnjs 加载插件：</p> <pre><code><script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="some-long-string" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="some-other-long-string" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </code></pre> <p>然后在控制器中创建一些图表以将其提供给视图，设置一些插件特定选项：</p> <pre><code>$chart = new ReadOutChart(); // Fill chart with data $chart->options([ 'plugins' => '{zoom: {zoom: { wheel: {enabled: true, mode: \'xy\'}}}}' ]); </code></pre> <p>其中 <pre><code>ReadOutChart</code></pre> 是基于 <pre><code>ConsoleTVs\Charts\Classes\Chartjs\Chart</code></pre> 类构建的图表。</p> <p>然后再次在刀片中我绘制图表：</p> <pre><code><div> {!! $chart->container() !!} </div> {!! $chart->script() !!} </code></pre> <p>图表显示正确，但插件功能似乎不起作用。我很难做到这一点，因为我找不到很多关于在 Laravel 中使用 ChartJS 插件的文档。我能找到的最有用的信息是<a href="https://stackoverflow.com/questions/55923003/how-to-use-plugins-in-chartjs-and-laravel-chart-consoletvs-chartsjs">这里</a>。</p> <p>您是否发现错误或知道如何使其正常工作？</p> <p>附加信息：</p> <ul> <li>laravel 版本：10.16.1</li> <li>控制台/图表版本：6.6.0</li> </ul> </question> <answer tick="false" vote="0"> <p>看起来你做的一切都是正确的。但是，问题可能在于如何将选项传递到图表。选项应该是关联数组，而不是字符串。</p> <pre><code>$chart->options([ 'plugins' => [ 'zoom' => [ 'zoom' => [ 'wheel' => [ 'enabled' => true, 'mode' => 'xy' ] ] ] ] ]); </code></pre> </answer> </body></html>

laravel chart.js chartjs-plugin-zoom

回答 0 投票 0

如何提取具有反应属性的 Chart.js 图表作为 Svelte 中的单独组件？

我使用 npm create svelte@latest myapp 命令创建了一个骨架项目。接下来，我使用 npm install svelte-chartjs Chart.js 安装了 Chart.js 并创建了一个简单的条形图：我使用 npm create svelte@latest myapp 命令创建了一个 Skeleton Project。接下来，我使用 npm install svelte-chartjs chart.js 安装了 Chart.js 并创建了一个简单的条形图： <script> import { Bar } from 'svelte-chartjs'; import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'; Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale); let numbers = [10, 20, 30]; let dates = ['1/1/2024', '1/2/2024', '1/3/2024']; $: data = { labels: dates, datasets: [ { label: 'Random Number', data: numbers, backgroundColor: 'rgba(98, 182, 239,0.4)', borderColor: 'rgba(98, 182, 239, 1)', borderWidth: 2 } ] }; let options = { responsive: true, maintainAspectRatio: false }; async function generate() { const response = await fetch('/generate'); let fetchedData = await response.json(); dates = fetchedData.dates; numbers = fetchedData.numbers; } </script> <h1>Fetch Data from API endpoint</h1> <button on:click={generate}>Request</button> <div> <Bar {data} {options} /> </div> 它从 /generate API 端点获取数据，该端点生成 1 到 10 个随机数，值范围为 10 到 30。此外，日期是根据随机数的长度生成的。如果按下 Request 按钮，条形图将更新其标签和数据值。输出如下所示：更新 routes/generate/+server.js 和 numbers 数组的 dates 文件（模拟 API 端点）的内容如下： import { json } from '@sveltejs/kit'; function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min) + min); } function generateDates(numDates) { var today = new Date(); var dates = [] for (let i = 0; i < numDates; i++) { let dateString = today.toLocaleDateString('en-US'); dates.push(dateString); today.setDate(today.getDate() + 1); } return dates; } export function GET() { let length = getRandomNumber(1, 10); let numberData = Array.from({ length: length }, () => getRandomNumber(10, 30)); let dateData = generateDates(length); return json({dates: dateData, numbers: numberData}); } 从端点开始的数据长度在1到10之间随机选择，起始日期从当前日期开始。 API 端点的输出示例： {"日期":["2/8/2024","2/9/2024","2/10/2024"],"数字":[14,23,23]} 我想将 Bar 图表特定代码提取到单独的组件中，以提高可读性和可重用性。但是，在获取（生成）新数据时，labels 和 datasets[0].data 属性会发生反应性变化。如何将具有反应属性的 Chart.js 图表提取为单独的组件？创建一个组件（例如BarChart.svelte）并提取图表特定的代码： <script> import { Bar } from 'svelte-chartjs'; import { Chart, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'; Chart.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale); export let dates = []; export let numbers = []; $: data = { labels: dates, datasets: [ { label: 'Random Number', data: numbers, backgroundColor: 'rgba(98, 182, 239,0.4)', borderColor: 'rgba(98, 182, 239, 1)', borderWidth: 2 } ] }; let options = { responsive: true, maintainAspectRatio: false }; </script> <Bar {data} {options} /> 您需要导出 dates 和 numbers 变量，以便可以从另一个组件更新它们。将新组件导入到原始组件中，并使用条形图的属性分配获取的值： <script> import BarChart from './BarChart.svelte'; let numbers = [10, 20, 30]; let dates = ['1/1/2024', '1/2/2024', '1/3/2024']; async function generate() { const response = await fetch('/generate'); let data = await response.json(); dates = data.dates; numbers = data.numbers; } </script> <h1>Fetch Data from API endpoint</h1> <button on:click={generate}>Request</button> <div> <BarChart {dates} {numbers} /> </div> 注意： BarChart.svelte 组件是在获取组件旁边创建的。以后如果有多个组件，建议创建一个components文件夹。

javascript chart.js svelte svelte-component

回答 1 投票 0

如何使用来自 Svelte 中 API 端点的数据更新图表？

我使用 Svelte JS Web 框架和 Chart.js 图表库来绘制条形图。我创建了一个 Skeleton 项目并安装了 svelte-chartjs 和 Chart.js 包： npm 安装...

javascript chart.js svelte

回答 1 投票 0

react-chartjs-2 工具提示回调不起作用

我正在使用react-chartjs-2库在React中制作简单的图表。我尝试通过添加标题来自定义工具提示：工具提示：{ 回调：{ 标签：（工具提示项，数据）=> { ...

javascript reactjs chart.js react-chartjs-2

回答 2 投票 0

如何在ChartJs中获取时间值的像素来画线？

如何获取日期值的像素？我想画一条线。但对于 x 轴，我有时间值。因此我无法获取 x 的像素。我正在尝试使用 getPixelForValue。但它又回来了...