charts 相关问题

图表是数据的图形表示，通常采用图形或图表的格式。使用此标记可以了解有关使用图表库API的问题。

如何在react-pdf/renderer中使用Chart.js或recharts

我想使用react-pdf创建pdf，但对于图表/图表我必须使用Chart.js或recharts，但我无法直接实现react-pdf，这是我从qs中看到的另一个选项：如何添加

charts bar-chart recharts react-pdf react-pdfrenderer

回答 2 投票 0

我正在尝试使用vue和chart.js制作一个页面：从 'vue' 导入 { ref, onMounted }; 从“vue-slider-component”导入 VueSlider；导入 'vue-slider-component/theme/defa...</desc> <question vote="0"> <p>我正在尝试使用vue和chart.js制作一个页面：</p> <pre><code> <script setup> import { ref, onMounted } from 'vue'; import VueSlider from 'vue-slider-component'; import 'vue-slider-component/theme/default.css'; import Chart from 'chart.js/auto'; const data1 = { 2010: [50, 30, 20], 2011: [45, 35, 20] // <...> }; const minYear = 2010; const maxYear = 2024; const canvasRefs = ref([]); const charts = ref([]); const isPlaying = ref(false); const currentYear = ref(minYear); let animationFrame = null; function createChart(ctx, initialData) { return new Chart(ctx, { type: 'doughnut', data: { labels: ['Male', 'Female', 'NB'], datasets: [{ data: initialData, backgroundColor: ['#36A2EB', '#FF6384', '#FFCE56'], }] }, options: { responsive: true, maintainAspectRatio: false, animation: { animateRotate: true, animateScale: true }, plugins: { tooltip: { enabled: true } } } }); } function updateCharts() { charts.value.forEach((chartData, index) => { const chart = chartData.chart; const data = chartData.data[currentYear.value]; chart.data.datasets[0].data = data; chart.update(); }); } function playSlider() { if (isPlaying.value) { cancelAnimationFrame(animationFrame); document.getElementById('playButton').textContent = 'Play'; } else { const duration = 15000; const steps = (maxYear - minYear) * 100; const intervalTime = duration / steps; let currentStep = currentYear.value; const animate = () => { if (currentStep >= maxYear) { cancelAnimationFrame(animationFrame); isPlaying.value = false; document.getElementById('playButton').textContent = 'Play'; } else { currentStep += 0.01; currentYear.value = Math.round(currentStep); updateCharts(); animationFrame = requestAnimationFrame(animate); } }; animationFrame = requestAnimationFrame(animate); document.getElementById('playButton').textContent = 'Pause'; } isPlaying.value = !isPlaying.value; } function addChart(data) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const newChart = createChart(ctx, data[currentYear.value]); const chartWrapper = document.createElement('div'); const canvasContainer = document.createElement('div'); chartWrapper.classList.add('chart-wrapper'); canvasContainer.classList.add('canvas-container'); canvasContainer.appendChild(canvas); chartWrapper.appendChild(canvasContainer); document.getElementById('chartContainers').appendChild(chartWrapper); charts.value.push({ chart: newChart, data: data }); updateCharts(); } function handleSliderChange(value) { if (value >= minYear && value <= maxYear && value != currentYear.value) { currentYear.value = value; updateCharts(); } } onMounted(() => { addChart(data1); }); </script> <template> <div id="main"> <div id="chartContainers" class="chart-container"> <div v-for="(chartData, index) in chartDataList" :key="index" class="chart-wrapper"> <div class="canvas-container"> <canvas :ref="el => canvasRefs[index] = el" :id="'chartCanvas-' + index"></canvas> </div> </div> </div> <vue-slider :min="minYear" :max="maxYear" :interval="1" :value="currentYear" @change="handleSliderChange"/> <p id="currentYear">Year: {{ currentYear }}</p> <button id="playButton" @click="playSlider">{{ isPlaying ? 'Pause' : 'Play' }}</button> </div> </template> <style> // <...> </style> </code></pre> <p>似乎每当调用 <pre><code>chart.update()</code></pre> 时，我都会收到以下错误：</p> <pre><code>Uncaught TypeError: item is undefined configure core.layouts.js:332 beforeUpdate plugin.subtitle.js:28 callback helpers.core.ts:109 _notify core.plugins.js:60 notify core.plugins.js:42 notifyPlugins core.controller.js:1153 update core.controller.js:508 updateCharts DoughnutChart.vue:66 updateCharts DoughnutChart.vue:62 handleSliderChange DoughnutChart.vue:119 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 emit runtime-core.esm-bundler.js:725 syncValueByPos vue-slider.vue:504 dragMove vue-slider.vue:548 </code></pre> <p>我有点不知所措。图表和滑块最初都可以工作，移动滑块只是无法更新图表。我还没有发现类似的问题。我正在使用 Vite 和 Node v20.13.1。</p> </question> <answer tick="false" vote="0"> <p>如果您每次在 Vue 应用程序中的 Chart.js 实例上调用 update() 时都会遇到错误“items is undefined”，则问题的原因可能是由于 Vue 的代理干扰了 Chart.js 对象。 Vue 使对象具有反应性，这可能会干扰 Chart.js 内部管理其选项和配置的方式。</p> <p><strong>解决方案</strong></p> <p>要解决此问题，您可以使用 <pre><code>Object.seal</code></pre> 来密封 Chart.js 对象，然后将其分配给 Vue 中的响应式属性。这可以防止 Vue 向对象添加反应性，从而允许 Chart.js 正确处理它。</p> <pre><code>chart.value = Object.seal(new Chart(...)); </code></pre> <p>或者，您可以直接定义 Chart.js 实例，而不将其分配给响应式属性。</p> <pre><code>let chart = new Chart(...); </code></pre> <p>您也可以参考这个<a href="https://stackoverflow.com/questions/68560025/unexpected-error-when-attempting-to-update-chart-data-in-chart-js-in-a-vue-app">问题</a>。</p> </answer> </body></html>

vue.js charts chart.js

回答 0 投票 0

LightningChartJS with React：文本框在右下角显示不正确

我正在将 LightningChartJS 与 ReactJS 项目集成，并面临 TextBox 的位置未按预期对齐的问题。尽管将原点设置为 UIOrigins.RightBottom 并使用...

javascript reactjs charts lightningchart

回答 1 投票 0

删除chart.js中的x轴标签/文本

如何隐藏 Chart.js 中显示的 x 轴标签/文本？设置scaleShowLabels:false 仅删除 y 轴标签。变量选项= { 缩放字体颜色：“#fa0”...</desc> <question vote="91"> <p>如何隐藏 Chart.js 中显示的 x 轴标签/文本？</p> <p>设置 <pre><code>scaleShowLabels:false</code></pre> 仅删除 y 轴标签。</p> <pre><code><script> var options = { scaleFontColor: "#fa0", datasetStrokeWidth: 1, scaleShowLabels : false, animation : false, bezierCurve : true, scaleStartValue: 0, }; var lineChartData = { labels : ["1","2","3","4","5","6","7"], datasets : [ { fillColor : "rgba(151,187,205,0.5)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", data : [1,3,0,0,6,2,10] } ] } var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData,options); </script> </code></pre> </question> <answer tick="false" vote="175"> <h1>chart.js 版本 3 </h1> <pre><code>var chart = new Chart(ctx, { ... options:{ scales:{ x: { display: false ////this will remove all the x-axis grid lines } } } }); var chart = new Chart(ctx, { ... options: { scales: { x: { ticks: { display: false //this will remove only the label } } } } }); </code></pre> <h1>chart.js 版本 2.1 </h1> <pre><code>var chart = new Chart(ctx, { ... options:{ scales:{ xAxes: [{ display: false //this will remove all the x-axis grid lines }] } } }); var chart = new Chart(ctx, { ... options: { scales: { xAxes: [{ ticks: { display: false //this will remove only the label } }] } } }); </code></pre> <p><a href="http://www.chartjs.org/docs/#line-chart-chart-options" rel="nofollow noreferrer">参考：chart.js 文档</a></p> <p><strong>旧答案（当前版本为1.0 beta时写的）仅供参考：</strong></p> <p>为了避免在 <pre><code>chart.js</code></pre> 中显示标签，您必须设置 <pre><code>scaleShowLabels : false</code></pre> 并且避免传递 <pre><code>labels</code></pre>:</p> <pre><code><script> var options = { ... scaleShowLabels : false }; var lineChartData = { //COMMENT THIS LINE TO AVOID DISPLAYING THE LABELS //labels : ["1","2","3","4","5","6","7"], ... } ... </script> </code></pre> </answer> <answer tick="false" vote="48"> <h1>这是针对chart.js ^3.0.0</h1> <h3>删除 x 轴标签和网格图表线</h3> <pre><code>var chart = new Chart(ctx, { ... options:{ scales:{ x: { display: false } } } }); </code></pre> <h3>仅删除 x 轴标签</h3> <pre><code>var chart = new Chart(ctx, { ... options: { scales: { x: { ticks: { display: false } } } } }); </code></pre> </answer> <answer tick="false" vote="18"> <p>（此问题与 <a href="https://stackoverflow.com/questions/28673804/">In Chart.js 重复，如果从移动设备访问，是否可以隐藏条形图的 x 轴标签/文本？</a>）他们添加了这个选项，2.1.4（也许更早一点）有它</p> <pre><code>var myLineChart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ ticks: { display: false } }] } } } </code></pre> </answer> <answer tick="false" vote="11"> <p></p><div data-hide="false" data-lang="js"> <div> <pre><code>var lineChartData = { labels: ["", "", "", "", "", "", ""] // To hide horizontal labels ,datasets : [ { label: "My First dataset", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data: [28, 48, 40, 19, 86, 27, 90] } ] } window.onload = function(){ var options = { scaleShowLabels : false // to hide vertical lables }; var ctx = document.getElementById("canvas1").getContext("2d"); window.myLine = new Chart(ctx).Line(lineChartData, options); }</code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="8"> <p>现在面临在 Chartjs 中删除标签的问题。看起来文档有所改进。 <a href="http://www.chartjs.org/docs/#getting-started-global-chart-configuration" rel="noreferrer">http://www.chartjs.org/docs/#getting-started-global-chart-configuration</a></p> <pre><code>Chart.defaults.global.legend.display = false; </code></pre> <p>此全局设置可防止所有图表中显示图例。因为这对我来说已经足够了，所以我使用了它。我不确定如何避免单个图表的图例。</p> </answer> <answer tick="false" vote="8"> <p>对于那些这不起作用的人，以下是我如何隐藏 X 轴上的标签 - </p> <pre><code>options: { maintainAspectRatio: false, layout: { padding: { left: 1, right: 2, top: 2, bottom: 0, }, }, scales: { xAxes: [ { time: { unit: 'Areas', }, gridLines: { display: false, drawBorder: false, }, ticks: { maxTicksLimit: 7, display: false, //this removed the labels on the x-axis }, 'dataset.maxBarThickness': 5, }, ], </code></pre> </answer> <answer tick="false" vote="6"> <p>受christutty的回答启发，这里有一个修改源码但尚未经过彻底测试的解决方案。不过我还没有遇到任何问题。</p> <p>在默认部分中，在第 71 行周围添加此行：</p> <pre><code>// Boolean - Omit x-axis labels omitXLabels: true, </code></pre> <p>然后在第 2215 行左右，将其添加到 buildScale 方法中：</p> <pre><code>//if omitting x labels, replace labels with empty strings if(Chart.defaults.global.omitXLabels){ var newLabels=[]; for(var i=0;i<labels.length;i++){ newLabels.push(''); } labels=newLabels; } </code></pre> <p>这也保留了工具提示。</p> </answer> <answer tick="false" vote="3"> <p>最简单的解决方案是：</p> <p><pre><code>scaleFontSize: 0</code></pre></p> <p>参见 <a href="http://www.chartjs.org/docs/#getting-started-global-chart-configuration" rel="nofollow noreferrer">chart.js 文档</a></p> <p><a href="https://stackoverflow.com/questions/28673804">类似的问题</a></p> </answer> <answer tick="false" vote="3"> <p>如果您希望保留工具提示的标签，但不显示在栏下方，则以下技巧可能有用。我进行此更改是为了在私有 Intranet 应用程序上使用，并且尚未测试它的效率或副作用，但它满足了我的需要。</p> <p>在 Chart.js 中的第 71 行左右添加一个属性来隐藏条形标签：</p> <pre><code>// Boolean - Whether to show x-axis labels barShowLabels: true, </code></pre> <p>在第 1500 行左右，使用该属性来抑制更改 this.endPoint （似乎需要计算代码的其他部分，因为如果我禁用除此行以外的任何内容，图表的块会消失或渲染不正确）。</p> <pre><code>if (this.xLabelRotation > 0) { if (this.ctx.barShowLabels) { this.endPoint -= Math.sin(toRadians(this.xLabelRotation)) * originalLabelWidth + 3; } else { // don't change this.endPoint } } </code></pre> <p>大约在第 1644 行，使用该属性来抑制标签渲染：</p> <pre><code>if (ctx.barShowLabels) { ctx.fillText(label, 0, 0); } </code></pre> <p>我想对 Chart.js 源代码进行此更改，但对 git 不太熟悉，也没有时间严格测试，所以宁愿避免破坏任何东西。</p> </answer> <answer tick="false" vote="1"> <p>更新：chartjs ^4.2.0 + React-chartjs-2 ^5.2.0</p> <p>轴被移除。</p> <pre><code>const options = { legend: { display: false, }, scales: { x: { display: false, }, y: { display: false, }, }, </code></pre> </answer> </body></html>

javascript html charts chart.js

回答 0 投票 0

在Excel中以水平条显示数据集并带有偏移量？

我有下表开始结束持续时间（年）鲍勃·拉金 1924年9月1日 1932年10月1日 8 艾德·詹金斯 1925 年 1 月 1 日

excel charts offset

回答 2 投票 0

如何在 React 中使 Chart.js 图表具有固定纵横比的响应能力？

我正在开发一个 React 项目，我需要在网格布局的父组件内显示 Chart.js 图表。图表应根据其父容器调整大小，同时保持...

css reactjs charts chart.js responsive

回答 1 投票 0

openpyxl 折线图：如何为线条分配随机标记？

我设法创建了一个几乎符合我要求的简单折线图： c1 = opxl.chart.LineChart() c1.样式 = 2 数据 = opxl.chart.Reference(wsh, min_col=2, min_row=24, max_col=maxc, max_row=29) 标签...