charts 相关问题

是否可以使用chartjs在Laravel中生成多个图表？如果可以请给出解决方案

我的刀片文件代码是： @foreach（$radio_data 作为$data） ... 我的刀片文件代码是： @foreach ($radio_data as $data) <div style="text-align: center" class="row"> <div class="col-md-4 text-center" > <canvas id="myChart"></canvas> </div> </div> @php array_push($dataPoints, array("label"=> " $data->answer ", "y"=> $data->num )); @endphp <p>{{ $data->answer }}: {{ $data->num }}</p> @endforeach 我正在控制器中获取数据并将其发送到视图。 最后我用动态画布ID和更新功能做到了这一点。 这是我的代码： <div style="text-align: center" class="row"> <div class="col-md-4 text-center" > <canvas id="{{ $loop->index }}"></canvas> </div> </div> <script> let {{ 'c'.$u }} = new Chart(document.getElementById({{ $loop->index }}), { type: 'pie', data: { labels: [], datasets: [{ label: '# of Votes', data: [], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script> @foreach ($radio_data as $data) <script> {{ 'c'.$u }}.data.labels.push('{{ $data->answer }}'); {{ 'c'.$u }}.data.datasets.forEach((dataset) => { dataset.data.push({{ $data->num }}); }); {{ 'c'.$u }}.update(); </script>

如何在图表js中显示百分比（%）

我想在图表中显示百分号。我从控制器的数据库中获取数据并显示 vue js 文件中的数据。这是我的图表代码。 从 'vue-ch 导入 { Donut } ...</desc> <question vote="10"> <p>我想在图表中显示百分号。我从控制器的数据库中获取数据并显示 vue js 文件中的数据。这是我的图表代码。</p> <pre><code>&lt;script&gt; import { Doughnut } from &#39;vue-chartjs&#39;; export default { props:[&#39;appurl&#39;], extends: Doughnut, data(){ return{ item:[], } }, mounted() { this.getData(); }, methods:{ setChartLoader: function(e) { this.$emit(&#39;setChartLoader&#39;, e); }, renderDoughnutChart(serviceName,serviceData){ this.renderChart({ datasets: [{ data: serviceData, backgroundColor: [ &#39;rgba(41, 121, 255, 1)&#39;, &#39;rgba(38, 198, 218, 1)&#39;, &#39;rgba(138, 178, 248, 1)&#39;, &#39;rgba(255, 100, 200, 1)&#39;, &#39;rgba(116, 96, 238, 1)&#39;, &#39;rgba(215, 119, 74, 1)&#39;, &#39;rgba(173, 92, 210, 1)&#39;, &#39;rgba(255, 159, 64, 1)&#39;, &#39;rgba(247, 247, 247, 1)&#39;, &#39;rgba(227, 247, 227, 1)&#39;, ], }], // These labels appear in the legend and in the tooltips when hovering different arcs labels: serviceName, }, {responsive: true, maintainAspectRatio: false, cutoutPercentage: 80}) }, getData(){ axios.get(this.appurl+&#39;/dashboardgetdatadoughnut&#39;).then(response =&gt; { this.item = response.data; this.setChartLoader(false); this.renderDoughnutChart(this.item.serviceName,this.item.serviceCount) }).then(function(){ }); } }, } &lt;/script&gt; </code></pre> <p>这是我的控制器</p> <pre><code>public function doughnutData() { $serviceNameArray = array(); $serviceConfirmed = DB::table(&#39;bookings&#39;)-&gt;whereDate(&#39;booking_date&#39;, date(&#39;Y-m-d&#39;)) -&gt;select(&#39;status&#39;,DB::raw(&#39;round(count(*) *100 / (select count(*) from bookings WHERE booking_date = curdate())) as count&#39;)) -&gt;groupBy(&#39;status&#39;)-&gt;get(); $serviceCount = array(); foreach($serviceConfirmed as $name) { array_push($serviceNameArray,$name-&gt;status); array_push($serviceCount,$name-&gt;count); } return [&#39;serviceName&#39;=&gt;$serviceNameArray, &#39;serviceCount&#39;=&gt;$serviceCount]; } </code></pre> <p>我想在图表中显示 67%，但我无法显示 % 符号</p> <p><a href="https://i.sstatic.net/QKYEN.png" rel="noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvUUtZRU4ucG5n" alt="enter image description here"/></a></p> </question> <answer tick="true" vote="17"> <p>在图表选项中，您可以使用工具提示回调来自定义工具提示。 </p> <p>这里，% 符号被添加到标准工具提示文本中... </p> <pre><code>tooltips: { callbacks: { label: function(tooltipItem, data) { return data[&#39;labels&#39;][tooltipItem[&#39;index&#39;]] + &#39;: &#39; + data[&#39;datasets&#39;][0][&#39;data&#39;][tooltipItem[&#39;index&#39;]] + &#39;%&#39;; } } } </code></pre> <p>请参阅以下工作片段... </p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>var ctx = document.getElementById(&#34;myChart&#34;).getContext(&#39;2d&#39;); var myChart = new Chart(ctx, { type: &#39;pie&#39;, data: { labels: [&#39;confirmed&#39;, &#39;pending&#39;], datasets: [{ data: [67, 33], backgroundColor: [ &#39;rgba(41, 121, 255, 1)&#39;, &#39;rgba(38, 198, 218, 1)&#39;, &#39;rgba(138, 178, 248, 1)&#39;, &#39;rgba(255, 100, 200, 1)&#39;, &#39;rgba(116, 96, 238, 1)&#39;, &#39;rgba(215, 119, 74, 1)&#39;, &#39;rgba(173, 92, 210, 1)&#39;, &#39;rgba(255, 159, 64, 1)&#39;, &#39;rgba(247, 247, 247, 1)&#39;, &#39;rgba(227, 247, 227, 1)&#39;, ], }] }, options: { responsive: true, maintainAspectRatio: false, cutoutPercentage: 80, tooltips: { callbacks: { label: function(tooltipItem, data) { return data[&#39;labels&#39;][tooltipItem[&#39;index&#39;]] + &#39;: &#39; + data[&#39;datasets&#39;][0][&#39;data&#39;][tooltipItem[&#39;index&#39;]] + &#39;%&#39;; } } } } });</code></pre> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js&#34;&gt;&lt;/script&gt; &lt;canvas id=&#34;myChart&#34;&gt;&lt;/canvas&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

网格线未显示在谷歌条形图中透明条后面

在龙卷风图表中，我有 4 个数据列，而第一个数据列是白色的，以便创建龙卷风图表的外观。 现在的问题是网格线没有显示，因为 w...

Chart.js 带区域范围的折线图

我想向 Chart.js 折线图添加另一个维度，类似于下面的图表或这个 Highcharts 示例。我很难理解在哪里可以实现这样的功能，

如何显示y轴标称标签，无论是否有数据

我有一些简单的条形图，有时某些 y 轴标称类别没有任何与之关联的数据。但是，我仍然想在图表上显示这些值，因为...

堆叠水平条形图，其中 x 是 Apache Echarts 的时间

我已经尝试了一段时间来弄清楚如何正确绘制由单行组成的图表，但该行中可以有不同的值。上面是一个简单的模拟，它应该看起来如何......

Swift UI PointMark 图标在 Y 轴上被切断，并在 SwiftUI Char 中显示日期数据

在SwiftUI Chart中显示PointMark的问题是，当我使用PointMark显示多个点图标时，并且Y轴代表Date类型数据，图标不完全可见。到...

如何在 VBA Excel 中更改甜甜圈孔尺寸

我想使用以下命令将圆环图的大小更改为 75%： ChartObj.Chart.DoughnutHoleSize = 75 但我收到编译错误：找不到方法或数据成员 甜甜圈孔尺寸应该...

图表 WPF 中的自定义系列标签

我们有一个图表控件，可以并排显示条形图。它基于 ArgumentDataMember“x”和 ValueDataMember“y”。图表与数据源绑定（chartData，

Swift ui 图表问题：Y 轴上的日期类型在 BarMark 中显示顶部时间较小，底部时间较大

共有2个问题 当使用 SwiftUI 的图表和 BarMark 来绘制 Y 轴上具有日期值的数据时，会出现 Y 轴上显示的时间似乎是倒转的问题...

vba 中折线图的动态数据标签范围

我在 VBA 中创建了一个宏，用于创建折线图。 折线图使用 X 轴和 Y 轴的动态范围名称，效果很好。 但是，我尝试为数据使用动态范围名称...

默认情况下数据透视表中折叠的行或列

在Apache Superset中创建数据透视表图表时，是否可以确保行和列默认折叠？ 我在数据透视表中定义了一列、两行和两个指标。

滚动图表时，如何找到视图中数据点的 x 值？

我有一个沿 x 轴显示日期的应用程序。用户可以选择显示数据的日期范围。通过输入日期范围的日期，可以沿 x 轴移动该日期范围。通过

JQuery 代码未在我的图表中显示正确的值

我被困在某件事上，如果有人能帮助我，我将非常感激。 我正在使用 HTML 和 JQuery 构建一个简单的图表/图形。 我有以下代码： <p>我被困在某件事上，如果有人能帮助我，我将非常感激。</p> <p>我正在使用 HTML 和 JQuery 构建一个简单的图表/图形。</p> <p>我有以下代码：</p> <pre><code>&lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script&gt; $(document).ready(function() { $(&#34;.graph-box .value&#34;).each(function() { var num = $(this).html() var iNum = parseInt(num); var eq= $(this).index(); var finalSum = (iNum/1000); alert (finalSum); $(&#34;.graph-bar&#34;).width (finalSum + &#34;%&#34;); }); }); &lt;/script&gt; &lt;style&gt; * {padding:0; margin:0;} .graph-box {border:1px solid #ccc; box-shadow:3px 3px 3px #ccc;} .entry {display:flex;} .name {width:500px; background-color:#ccc;} .graph-bar {box-sizing:border-box; background-color:#ff0000; color:#fff; border-bottom:1px solid #ccc; border:1px solid blue; height:30px;} &lt;/style&gt; &lt;body&gt; &lt;div class=&#34;graph-box&#34;&gt; &lt;div class=&#34;entry&#34;&gt; &lt;div class=&#34;name&#34;&gt;England&lt;/div&gt; &lt;div class=&#34;value&#34;&gt;817&lt;/div&gt; &lt;div class=&#34;graph&#34;&gt;&lt;div class=&#34;graph-bar color-1&#34;&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;entry&#34;&gt; &lt;div class=&#34;name&#34;&gt;Scotland&lt;/div&gt; &lt;div class=&#34;value&#34;&gt;500&lt;/div&gt; &lt;div class=&#34;graph&#34;&gt;&lt;div class=&#34;graph-bar color-1&#34;&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=&#34;entry&#34;&gt; &lt;div class=&#34;name&#34;&gt;Wales&lt;/div&gt; &lt;div class=&#34;value&#34;&gt;250&lt;/div&gt; &lt;div class=&#34;graph&#34;&gt;&lt;div class=&#34;graph-bar color-1&#34;&gt;&lt;/div&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>您可能会看到，JQuery 检查 .value div 并记录内容。然后将其转换为整数。我知道这部分是正确的，并且在我输入警报时可以正常工作。运行时，它会给出 3 个正确的值。 然后它应该做的是找到名为“graph-bar”的 div 并根据它创建的整数设置该 div 的宽度。但是，当我运行代码时，所有条形都显示相同的宽度。</p> <p>当所有整数都在一个 div 中时，我已经让这段代码运行良好，所以我怀疑这与“eq”代码有关？ 如果有人可以让我知道如何解决这个问题，以及最重要的原因，我可以知道未来并再次避免这个问题。</p> <p>感谢有人能给我的任何帮助！</p> </question> <answer tick="false" vote="0"> <p>您的解决方案中缺少两件事：</p> <ol> <li>您需要指定 <pre><code>.graph</code></pre> 类的宽度 <pre><code>.graph {width: 100%;} </code></pre> </li> <li>您应该只更新<strong></strong>当前父节点的<pre><code>.graph</code></pre>： <pre><code>$(document).ready(function() { $(&#34;.graph-box .value&#34;).each(function(i, elem) { var num = $(this).html() var iNum = parseInt(num); var eq= $(this).index(); var finalSum = (iNum/1000) * 100; // alert (finalSum); $(elem).parent().find(&#34;.graph-bar&#34;).css(&#34;width&#34;, finalSum + &#34;%&#34;); }); }); </code></pre> </li> </ol> </answer> </body></html>

highcharts，json数据：行和列

可能是非常基本的问题： 我正在使用两个系列的 highcharts，一个用行表示，另一个用列表示，数据使用 json 加载，问题在于如何告诉 highcharts 一个...

如何构建具有多个数据系列的图表

我需要构建一个包含多个数据系列的图表，以根据特定元素（例如，P3、M1、M2 和 MC）比较每种动物的结果（例如，“老马”与“新马”）。 .

如何将legedn文本图表更改为自定义文本阿拉伯语？

我从事水晶报告工作，我面临问题，无法将文本图例更改为阿拉伯文本 那么如何解决这个问题呢？ 所以颜色旁边的图例文本我需要更改为自定义文本阿拉伯语。 正是我做的...

Altair图表标记_文字背景颜色/视觉清晰度

我一直在 Streamlit 的背景下使用 Altair 图表来制作简单的计算器。在一种情况下，我想绘制 3 个并排的条形图，以解释进步的程度......

Highcharts.stockChart 不是函数

我尝试使用 Hightcharts.js 制作图表，但出现错误 类型错误：Highcharts.stockChart 不是函数。 我使用 npm(package.json) 安装它 “highcharts”：“^5.0.6” 呼叫 变种

将 Highcharts 与 NextJS 一起使用，时间（不是日期）重复

我需要在给定的开始和结束时间内加载给定值范围的数据点。我使用 linspace 在范围之间分配纪元。 我已经手动检查和编码了...