chart.js 相关问题

如何添加 % 或 $ 值到 Chart.js 4 数据

我已经有了数据的百分比，我只需要将 % 附加到每个数据值即可。 我对 JS 和编程都很陌生，所以请保持友善。 const Votes1 = document.getElementById(&...

图表js。如何在单击时滚动到部分

我刚刚开始学习如何在代码中包含图表，但遇到了一些问题。 我这里有一个水平条形图，显示各国的交通数据。 图表下方有几个部分...

在 ChartJS 3.8.x 中设置 borderSkipped: false 后，漏斗图的左边框不绘制

我有这个漏斗图： this.chartLeads2 = new FunnelChart(document.getElementById("graphLead2").getContext('2d'), { 数据： { 标签：[“总 Q 领先&...

Chartjs 最初对隐藏的 LegendItems 做出反应

如何在所有 LegendItem 上设置 {hidden:true}？如果我将隐藏属性设置为 true，图例项只会被删除线，但图表仍会显示。有任何想法吗？ 谢谢你！ 我已经尝试过这个：

如何使用chart.js动态堆叠和取消堆叠条形图

我有一个条形图，我想在其中切换条形是否堆叠或彼此后面。 注意 x 轴堆叠在一起。 使用效果（（）=> { if (!myChart) 返回； ...

如何在没有浏览器的情况下在nodejs上创建条形图图像？

有一个使用PDF生成器的nodejs项目，需要将条形图粘贴到其中，但该项目运行在无桌面服务器上。 有任何库或方法可以在nodej上创建条形图图像...

为什么在 livewire 应用程序中，chartjs 元素在数据刷新时会丢失画布属性？

在 laravel 10 / livewire 3 应用程序中，我根据 db 和 4 个过滤器中的数据制作 Chartjs 报告。 它对我来说可以使用刀片文件： &l... 在 laravel 10 / livewire 3 应用程序中，我根据 db 和 4 个过滤器的数据制作 Chartjs 报告。 它对我来说可以使用刀片文件： <div class="editor_field_block_wrapper"> <div class="editor_field_block_device_splitter"> <div class="w-4/12 pb-0 pl-2 md:pt-3 "> <label for="filterModelType" class="editor_field_block_device_label">Model type: <span class="editor_form_aria_required" aria-required="true"> * </span></label> </div> <div class="p-2 w-full"> <select wire:model.blur="filterModelType" class="editor_form_input" tabindex="20" id="filterModelType"> <option value=""> - Select all -</option> @foreach($modelTypeSelectionItems as $key=>$label) <option value="{{$key}}">{{$label}}</option> @endforeach </select> @error('filterModelType') <span class="error_text">{{$message}}</span> @enderror </div> </div> </div> <div class="editor_field_block_wrapper"> <div class="editor_field_block_device_splitter"> <div class="w-4/12 pb-0 pl-2 md:pt-3 "> <label for="filterDateFrom" class="editor_field_block_device_label">From date</label> </div> <div class="p-2 w-full"> <x-inputs.datepicker id="filterDateFrom" wire:model.lazy="filterDateFrom" tabindex="20"/> @error('filterDateFrom') <span class="editor_form_validation_error">{{ $message }}</span> @enderror </div> </div> </div> <div class="editor_field_block_wrapper"> <div class="editor_field_block_device_splitter"> <div class="w-4/12 pb-0 pl-2 md:pt-3 "> <label for="filterDateTill" class="editor_field_block_device_label">Till date</label> </div> <div class="p-2 w-full"> <x-inputs.datepicker id="filterDateTill" wire:model.lazy="filterDateTill" tabindex="30"/> @error('filterDateTill') <span class="editor_form_validation_error">{{ $message }}</span> @enderror </div> </div> </div> </fieldset> @if($this->totalReactionCount > 0) <div class="min-w-full"> <canvas id="reactionsChartStatisticsChart" style="background: #000000"></canvas> </div> @else <div class="m-2 p-2 warning_text"> {!! AppIconFacade::get(IconEnum::Warning ) !!} There are no data found ! </div> @endif @assets <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> @endassets @script <script> const ctx = document.getElementById('reactionsChartStatisticsChart'); const reactions = $wire.reactions; const labels = reactions.map(item => item.action_label) const values = reactions.map(item => item.reaction_count) var chartObj = new Chart(ctx, { type: 'pie', data: { labels: labels, datasets: [{ label: '# of Reactions', data: values, borderWidth: 2 }] }, options: { scales: { y: { beginAtZero: true } }, plugins: { legend: { position: 'top', labels: { font: { size: 18 }, fontColor: 'white' } }, title: { display: true, text: 'Reactions by type with total quality {{ $totalReactionCount }}' } } } }); </script> @endscript console.log(chartObj) // chartObj.update() // IF TO UNCOMMENT - RAISED ERROR : Uncaught SyntaxError: Unexpected end of input // chartObj.refresh() // IF TO UNCOMMENT - RAISED ERROR : chartObj.refresh is not a function </div> </div> 当页面第一次重新加载时，我有一个有效的图表，其包装 html 元素的最大宽度： 当我更改某些过滤器参数时，数据会重新加载并且图表尺寸很小： 对于第三个过滤器，更改了reactionChartStatisticsChart元素丢失了其图表属性，并且我有黑色块： 在网络中搜索我发现了一些chartObj.update()方法，但它们对我不起作用。 我可以通过什么方式检查/修复图表？ 数据源组件代码： 在ReactionsChartStatistics.php组件类中我有： <?php namespace App\Livewire\Admin; use App\Enums\ReactionActionEnum; use App\Models\Reaction; ... class ReactionsChartStatistics extends Component { public array $reactions = []; public int $totalReactionCount = 0; public function mount() { // Get data for filtering block $this->usersSelectionItems = User::get()->pluck('name','id')->toArray(); $this->modelTypeSelectionItems = $this->getModelTypeSelectionItems(); $statisticsDays = ConfigValueEnum::get(ConfigValueEnum::NEWS_REACTIONS_STATISTICS_DAYS); $this->filterDateFrom = Carbon::now()->addDays(-$statisticsDays)->startOfDay(); $this->filterDateTill = Carbon::now()->endOfDay(); } public function render(): View { $reactionTb = (new Reaction)->getTable(); $this->totalReactionCount = 0; $this->reactions = Reaction ::getByCreatedAt($this->filterDateFrom, '>=') ->getByCreatedAt($this->filterDateTill, '<') ->groupBy('action') ->orderBy('reaction_count', 'desc') ->select( $reactionTb . '.action', DB::raw('count(' . $reactionTb . '.id) as reaction_count')) ->get()->toArray(); } foreach ($this->reactions as $key => $reaction) { $this->reactions[$key]['action_label'] = ReactionActionEnum::getLabel($reaction['action']); $this->totalReactionCount += $reaction['reaction_count']; } return view('livewire.admin.reactions-chart-statistics')->layout('components.layouts.admin'); } } 在包含图表的 中添加 wire:ignore 以防止 Livewire 更新它： @if($this->totalReactionCount > 0) <div wire:ignore class="min-w-full"> {{-- HERE -- }}

如何在 ChartJS 3.8.x 中创建漏斗图

我正在尝试使用此图表创建一个漏斗，但我找不到使其工作的方法。我正在使用 VueCLI (vue 2)。 执行 npm install Chart.js Chartjs-chart-funnel 后，控制台上甚至出现错误

如何在ChartJS中显示来自Mongodb的数据？

我有一个饼图，我需要在其中显示“帖子”中的数据 有谁知道如何做到这一点？ const DoughnutChartComponent = (post) => { const Ferum = isNaN(parseInt(post.title)) ？ 0：

条形图覆盖整个图表

我正在尝试创建一个 Chart.js，将主数据集显示为条形图。将有 YellowBar 和 RedBar 数据集覆盖在主数据集之上，但这些需要......

使用 Chartjs 的水平堆栈栏和线性栏

我正在尝试使用 Chartjs 创建机器事件的水平堆栈条形图和速度的线性图表。机器事件数据具有开始和结束时间，速度具有时间数据。我能够

plugins.legend.align 是不兼容的 typescript Chartjs 类型

我的选项对象中有类似的东西 常量选项 = { 插件：{ 传奇： { 对齐：'结束'， } } } 根据 Chartjs 文档，align 接受 3 个值： 开始 分...

ChartJs 工具提示仅在鼠标指针悬停在远离图表时才可见

ChartJs 工具提示仅在鼠标指针距该点 10-20 像素时才可见。 请看下图。仅当指针不在图表上时才会出现工具提示。没有什么...

ChartJS/react-chartjs-2向条形图添加水平参考线

我正在使用 ChartJS/react-chartjs-2 创建条形图。 条形图显示正常，没有什么特别的： 我想添加一条水平线来显示年份总计的平均值，看看如何...

无法通过始终返回零的 props 计算 douhnut Chart.js 值

const DoughnutChart：React.FC = (props) => { // eslint-disable-next-line React/prop-types const { 图表详细信息 } = 道具； const activeCount = 图表详细信息？.

“在‘chart.js’中找不到导出‘默认’（作为‘图表’导入）

嗨，我遇到了这个问题，但不太明白为什么这么说。我使用 vue3 和 tailwind 。 “在‘chart.js’中找不到导出‘默认’（作为‘图表’导入）”

Chart.js 不考虑 yAxis 的最小值和最大值

所以，我有一个条形图（chart.js v4.4.2），它显示了 4 个不同的数据集。如果没有数据，图表将遵循 y 轴的所有最小值和最大值。当图表更新时，它遵循最小值 i

ChartJS/react-chartjs-2 将条形图分成两个数据点

我正在使用 ChartJS/react-chartjs-2 创建条形图。 到目前为止，条形图显示正常，没有什么特别的： 我的数据如下所示： { 名称：“德雷根布格”， 帕特...

如何在 Chart.js 中将刻度线移动到 x 轴上方

我正在 Chart.js 中处理图表，我的 x 轴如下所示： 我已经查看了文档和 GitHub，似乎不可能将最左侧的标签重新对齐到右侧，并且 t...

有没有办法使用 ConsoleTVs/Charts 包将非内联插件与 Chart.js 结合使用？

我正在使用一个 Laravel 应用程序，该应用程序使用 Backpack 并使用 ConsoleTVs/Charts 包渲染图表。从我在网上发现的情况来看，没有办法使用需要