highcharts 相关问题

highchart 隐藏 xaxis 类别

我正在使用 highchart，我想隐藏 x 轴类别（图表底部的数字，请参阅下图参考）。 有谁知道怎么隐藏吗

Highcharts 箱线图 y 轴

我有一个来自 highcharts lib 的箱线图。这是我的组件和数据： Highcharts.chart('容器', { 图表： { 类型：'箱线图'， “宽度”：165 }, 标题： { ...

高图表和图像生成

这是我生成的html 函数 loadHighchartsScript() { var script = document.createElement('script'); ...</desc> <question vote="0"> <p>这是我生成的 html </p> <pre><code> &lt;script&gt; function loadHighchartsScript() { var script = document.createElement(&#39;script&#39;); script.src = &#39;https://code.jquery.com/jquery-3.6.4.min.js&#39;; script.async = true; document.head.appendChild(script); var script2 = document.createElement(&#39;script&#39;); document.head.appendChild(script2); script2.src = &#39;https://code.highcharts.com/highcharts.js&#39;; script2.async = true; document.head.appendChild(script2); var script3= document.createElement(&#39;script&#39;); script3.src = &#39;https://code.highcharts.com/modules/exporting.js&#39;; script3.async = true; document.head.appendChild(script3); } loadHighchartsScript(); &lt;/script&gt;&lt;script src=&#34;https://code.jquery.com/jquery-3.6.4.min.js&#34; async=&#34;&#34;&gt;&lt;/script&gt;&lt;script src=&#34;https://code.highcharts.com/highcharts.js&#34; async=&#34;&#34;&gt;&lt;/script&gt;&lt;script src=&#34;https://code.highcharts.com/modules/exporting.js&#34; async=&#34;&#34;&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&#34;container&#34; data-highcharts-chart=&#34;0&#34; style=&#34;overflow: hidden;&#34;&gt;&lt;div id=&#34;highcharts-zyf9724-0&#34; dir=&#34;ltr&#34; style=&#34;position: relative; overflow: hidden; width: 452px; height: 190px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); user-select: none; touch-action: manipulation; outline: none;&#34; class=&#34;highcharts-container &#34;&gt;&lt;svg version=&#34;1.1&#34; class=&#34;highcharts-root&#34; style=&#34;font-family: Helvetica, Arial, sans-serif; font-size: 1rem;&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; width=&#34;452&#34; height=&#34;190&#34; viewBox=&#34;0 0 452 190&#34;&gt;&lt;desc&gt;Created with Highcharts 11.4.3&lt;/desc&gt;&lt;defs&gt;&lt;filter id=&#34;highcharts-drop-shadow-0&#34;&gt;&lt;feDropShadow dx=&#34;1&#34; dy=&#34;1&#34; flood-color=&#34;#000000&#34; flood-opacity=&#34;0.75&#34; stdDeviation=&#34;2.5&#34;&gt;&lt;/feDropShadow&gt;&lt;/filter&gt;&lt;/defs&gt;&lt;g class=&#34;highcharts-grid highcharts-xaxis-grid&#34; data-z-index=&#34;1&#34;&gt;&lt;/g&gt;&lt;g class=&#34;highcharts-grid highcharts-yaxis-grid&#34; data-z-index=&#34;1&#34;&gt;&lt;/g&gt;&lt;g class=&#34;highcharts-axis highcharts-xaxis&#34; data-z-index=&#34;2&#34;&gt;&lt;path fill=&#34;none&#34; class=&#34;highcharts-axis-line&#34; stroke=&#34;#333333&#34; stroke-width=&#34;1&#34; data-z-index=&#34;7&#34;&gt;&lt;/path&gt;&lt;/g&gt;&lt;g class=&#34;highcharts-axis highcharts-yaxis&#34; data-z-index=&#34;2&#34;&gt;&lt;/g&gt;&lt;text x=&#34;226&#34; text-anchor=&#34;middle&#34; class=&#34;highcharts-title&#34; data-z-index=&#34;4&#34; style=&#34;font-size: 1.2em; color: rgb(51, 51, 51); font-weight: bold; fill: rgb(51, 51, 51);&#34; y=&#34;25&#34;&gt;&lt;/text&gt;&lt;text x=&#34;226&#34; text-anchor=&#34;middle&#34; class=&#34;highcharts-subtitle&#34; data-z-index=&#34;4&#34; style=&#34;color: rgb(102, 102, 102); font-size: 0.8em; fill: rgb(102, 102, 102);&#34; y=&#34;24&#34;&gt;&lt;/text&gt;&lt;text x=&#34;10&#34; text-anchor=&#34;start&#34; class=&#34;highcharts-caption&#34; data-z-index=&#34;4&#34; style=&#34;color: rgb(102, 102, 102); font-size: 0.8em; fill: rgb(102, 102, 102);&#34; y=&#34;187&#34;&gt;&lt;/text&gt;&lt;g class=&#34;highcharts-legend highcharts-no-tooltip&#34; data-z-index=&#34;7&#34; transform=&#34;translate(185,148)&#34;&gt;&lt;rect fill=&#34;none&#34; class=&#34;highcharts-legend-box&#34; rx=&#34;0&#34; ry=&#34;0&#34; stroke=&#34;#999999&#34; stroke-width=&#34;0&#34; filter=&#34;none&#34; x=&#34;0&#34; y=&#34;0&#34; width=&#34;81&#34; height=&#34;27&#34;&gt;&lt;/rect&gt;&lt;g data-z-index=&#34;1&#34;&gt;&lt;g&gt;&lt;g class=&#34;highcharts-legend-item highcharts-line-series highcharts-color-undefined highcharts-series-0&#34; data-z-index=&#34;1&#34; transform=&#34;translate(8,3)&#34;&gt;&lt;path fill=&#34;none&#34; class=&#34;highcharts-graph&#34; stroke-width=&#34;2&#34; stroke-linecap=&#34;round&#34; d=&#34;M 1 12 L 15 12&#34; stroke=&#34;#BFBFBF&#34;&gt;&lt;/path&gt;&lt;path fill=&#34;#BFBFBF&#34; d=&#34;M 8 16 A 4 4 0 1 1 8.000199999999918 15.999999995 Z&#34; class=&#34;highcharts-point&#34; stroke=&#34;#ffffff&#34; stroke-width=&#34;0&#34; opacity=&#34;1&#34;&gt;&lt;/path&gt;&lt;text x=&#34;21&#34; text-anchor=&#34;start&#34; data-z-index=&#34;2&#34; style=&#34;color: rgb(51, 51, 51); cursor: pointer; font-size: 11px; text-decoration: none; font-family: Calibri; fill: rgb(51, 51, 51);&#34; y=&#34;15&#34;&gt;NFI-ODCE&lt;/text&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;/g&gt;&lt;g class=&#34;highcharts-axis-labels highcharts-xaxis-labels&#34; data-z-index=&#34;7&#34;&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;3Q21&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;4Q21&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;1Q22&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;2Q22&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;3Q22&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;4Q22&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;1Q23&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;2Q23&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;3Q23&lt;/text&gt;&lt;text x=&#34;0&#34; text-anchor=&#34;middle&#34; transform=&#34;translate(0,0)&#34; style=&#34;color: rgb(51, 51, 51); cursor: default; font-size: 11px; font-family: Calibri; fill: rgb(51, 51, 51);&#34;&gt;4Q23&lt;/text&gt;&lt;/g&gt;&lt;g class=&#34;highcharts-axis-labels highcharts-yaxis-labels&#34; data-z-index=&#34;7&#34;&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/div&gt; &lt;script&gt; function renderChart() { var chartConfig = {&#34;chart&#34;:{&#34;height&#34;:190,&#34;width&#34;:452},&#34;title&#34;:{&#34;text&#34;:&#34;&#34;},&#34;credits&#34;:{&#34;enabled&#34;:false},&#34;xAxis&#34;:{&#34;categories&#34;:[&#34;3Q21&#34;,&#34;4Q21&#34;,&#34;1Q22&#34;,&#34;2Q22&#34;,&#34;3Q22&#34;,&#34;4Q22&#34;,&#34;1Q23&#34;,&#34;2Q23&#34;,&#34;3Q23&#34;,&#34;4Q23&#34;],&#34;labels&#34;:{&#34;style&#34;:{&#34;fontSize&#34;:&#34;11px&#34;,&#34;fontFamily&#34;:&#34;Calibri&#34;}}},&#34;yAxis&#34;:{&#34;title&#34;:{&#34;text&#34;:&#34;&#34;},&#34;labels&#34;:{&#34;style&#34;:{&#34;fontSize&#34;:&#34;11px&#34;,&#34;fontFamily&#34;:&#34;Calibri&#34;},&#34;formatter&#34;:&#34;function(){return this.value / 1000000 + \u0027M\u0027;}&#34;}},&#34;legend&#34;:{&#34;itemStyle&#34;:{&#34;fontSize&#34;:&#34;11px&#34;,&#34;fontFamily&#34;:&#34;Calibri&#34;},&#34;itemHeight&#34;:12,&#34;itemMarginTop&#34;:1,&#34;itemMarginBottom&#34;:1},&#34;series&#34;:[{&#34;name&#34;:&#34;NFI-ODCE&#34;,&#34;color&#34;:&#34;#BFBFBF&#34;,&#34;data&#34;:[4793403562,4873403562,5096570645,5188346684,4994094697,4602946358,4326011268,4138145751,3897573489,3433337175],&#34;dataLabels&#34;:{&#34;enabled&#34;:true,&#34;style&#34;:{&#34;fontSize&#34;:&#34;11px&#34;,&#34;fontFamily&#34;:&#34;Calibri&#34;},&#34;allowOverlap&#34;:false}}]}; Highcharts.chart(&#39;container&#39;, chartConfig); } // Call renderChart() once the Highcharts script is loaded asynchronously window.addEventListener(&#39;load&#39;, renderChart); &lt;/script&gt; &lt;/body&gt;&lt;/html&gt; </code></pre> <p>但由于某种原因，我遇到了这个愚蠢的错误 highcharts.js:8 Uncaught TypeError: f.formatter.call is not a function</p> </question> <answer tick="false" vote="0"> <p>公共静态异步任务 GrowthNetAssetValue() {// 预处理数据以将值转换为数百万</p> <pre><code> var chartConfig = new { chart = new { height = 190, width = 452 }, title = new { text = &#34;&#34; }, // Set height and width for the chart and an empty title credits = new { enabled = false }, xAxis = new { categories = new[] { &#34;3Q21&#34;, &#34;4Q21&#34;, &#34;1Q22&#34;, &#34;2Q22&#34;, &#34;3Q22&#34;, &#34;4Q22&#34;, &#34;1Q23&#34;, &#34;2Q23&#34;, &#34;3Q23&#34;, &#34;4Q23&#34; }, labels = new { style = new { fontSize = &#34;11px&#34;, fontFamily = &#34;Calibri&#34; } } // Set font size and type for x-axis labels }, yAxis = new { title = new { text = &#34;&#34; }, labels = new { style = new { fontSize = &#34;11px&#34;, fontFamily = &#34;Calibri&#34; }, formatter = &#34;function()&#34; + &#34;{&#34; + &#34;return this.value / 1000000 + &#39;M&#39;;&#34; + &#34;}&#34; } }, legend = new { itemStyle = new { fontSize = &#34;11px&#34;, fontFamily = &#34;Calibri&#34; }, // Set font size and type for legend items itemHeight = 12, // Adjust the height of legend items itemMarginTop = 1, // Adjust the top margin of legend items itemMarginBottom = 1 // Adjust the bottom margin of legend items }, series = new[] { new { name = &#34;NFI-ODCE&#34;, color = &#34;#BFBFBF&#34;, data = new double?[] { 4793403562, 4873403562, 5096570645, 5188346684, 4994094697, 4602946358, 4326011268, 4138145751, 3897573489, 3433337175 }, dataLabels = new { enabled = true, style = new { fontSize = &#34;11px&#34;, fontFamily = &#34;Calibri&#34; }, allowOverlap = false, }, } } }; HighchartsImageExporter imageExporter = new HighchartsImageExporter(); byte[] chartImageBytes = await imageExporter.ExportChartAsImageBytes(chartConfig); return Convert.ToBase64String(chartImageBytes); } </code></pre> </answer> </body></html>

R highcharter() 全局千位分隔符？

有没有办法让我的 highcharter 图表在 y 轴和工具提示上有千位分隔符？不确定是否有单独的方法可以做到这一点，或者是否有全局选项。工具提示...

在 highcharts 中按名称或 ID 删除系列

有没有办法通过名称或ID删除系列？我的意思是可以通过 this.remove() 删除系列 或者 var 系列长度=图表.系列.长度; for(var i = seriesLength - 1; i > -1; i--) ...

如何在 HighCharts 中动态更改数据系列而不覆盖初始系列？

HighCharts 新手。 我有一个柱形图，我希望能够将业务数据的各个子集插入到柱中。 对于这个测试，我的数据系列是： 常量原始数据 = [ {y：0.033，

Highcharts 如何使用分组值动态更新图例？

我试图让图例显示该系列的分组值，并在范围更改时动态更新它。 通过更改范围，我的意思是单击范围选择器，移动

不同选项卡中的相同高图表未加载 - 仅第一个选项卡加载

我正在尝试使用选项卡更改上的不同数据更新相同的图表。 所以我的父组件具有这种形式的子组件 app-chart-metric-view 。我已经包含了选项卡事件检测...

如何从高图表导出中删除“数据表”选项？

在我的高图表中，当我包含导出选项时，它在上下文菜单中包含数据表。如果我尝试包含 MenuItems ，那么我将失去导出到 excel 和 CSV 的选项。 怎么...

Highchart 从图表中删除系列 1

我有一个瀑布图，我需要删除图表上出现的系列 1。 我已经尝试过： 传奇： { 启用：假 }, 和 显示图例：假， 但还是出现了。 图表： { 类型：“瀑布” },

在 ASP.NET Web 表单应用程序中为动态数据实现 HighCharts 时面临的问题

这是我在 aspx 页面中使用的 HighCharts JS 代码： Highcharts.chart('highcharts1', { 图表： { 类型：'酒吧' }, 标题： {

更改 highcharter sankey 中节点的工具提示

这是一个旧问题（更改 highcharter sankey 中的标签）的后续问题，其中解决方案显示了如何更改 R highcharter sankey 中链接的工具提示。 我现在也想改变...

如何使用 HighCharts 使 xAxis 动态化

如何使 x 轴动态处理日期时间数据和缩放。我希望 x 轴动态显示年份，然后是月份和年份，最后是基于缩放级别的日期和时间（动物园...

将 Highcharts 导出为 PDF（使用 javascript 和本地服务器 - 无互联网连接）

我在我的应用程序中使用 Highcharts（没有任何互联网连接） 我的 html 页面上有多个图表，我想生成一个包含该页面中所有图表的 PDF 报告。 哈...

破坏 npm 构建的依赖关系可能会将 ES6 代码带入 ES5 兼容的遗留构建中

我正在开发一个旧的遗留项目，我必须向其中引入 Highcharts 库。由于它不适用于以前版本的 Canvas，我必须将其升级到。这 2 个变化是...

Highcharts - 使用负值将零保持在 Y 轴中心

我有一个带有负值的面积图。与他们给出的示例没有什么不同，但有一个变化：我想将零保持在 Y 轴的中心。 我知道这可以通过

处理 Highcharts 中具有动态 x 轴范围的无数据模块

我目前正在使用 Highcharts 使用线性图显示时间序列数据。我实现了一个时间滑块组件，允许用户放大特定时间范围。这片...

Highcharts 导出服务器 - 示例不起作用

Highcharts 有一个导出服务器，他们在 GitHub 存储库中有一些示例： https://github.com/highcharts/node-export-server/blob/master/tests/node/scenarios/custom_code_from_string.json 如果你...

如何在 Next.js / React.js 中实现 Highcharts 的动态导出大小

我正在使用 Next.js 和 Highcharts 开发一个项目，我需要为 Highcharts 导出实现动态导出大小。本质上，我想允许用户导出不同尺寸的图表，s...

react：显示带有地理点的 Highcharts 地图

请告诉我如何在地图上指示地理点（即具有纬度和经度的对象）。 我使用 React 和 HighchartsReact。我创建了这段代码： 从“highcharts”导入 Highcharts 导入 * 作为