highcharts 相关问题

Highcharts是一个使用HTML,SVG和VML的Javascript图表库。该编辑器提供该产品的开源/非营利和商业版本。

Highcharts.js - 在子弹图中,将目标线设为虚线

在 Highcharts 中,我想创建一个子弹图。 但我希望目标线是虚线。 我在目标 API 中没有看到这样的选项。 目标 API 链接:https://api.highcharts.com/highcharts/series。

回答 1 投票 0

Highcharts 在 y 轴上自定义缩放 - 线性和对数的混合

我尝试在图表上使用对数刻度,如下所示: 然而,出站数据远低于入站数据。这在图表中没有正确显示,使它看起来像有

回答 2 投票 0

为什么堆栈标签在条形高图上重叠

我想在堆栈条形图上显示所有堆栈标签 我使用以下属性: y 轴:{ 反向堆栈:假, 分钟:0, 堆栈标签:{ endOnTick:这个。

回答 1 投票 0

如何在python中使用Dash获取highcharts的hover clickData?

任何人都可以帮助我,如何通过使用破折号和Python单击highchart图的任意点来获取悬停数据。下面给出了用于绘制高图表条形图的代码和数据集。 输入

回答 1 投票 0

highchart 隐藏 xaxis 类别

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

回答 1 投票 0

Highcharts 箱线图 y 轴

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

回答 1 投票 0

高图表和图像生成

这是我生成的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>

回答 0 投票 0

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

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

回答 4 投票 0

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

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

回答 5 投票 0

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

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

回答 2 投票 0

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

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

回答 2 投票 0

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

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

回答 2 投票 0

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

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

回答 1 投票 0

Highchart 从图表中删除系列 1

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

回答 1 投票 0

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

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

回答 1 投票 0

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

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

回答 1 投票 0

如何使用 HighCharts 使 xAxis 动态化

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

回答 1 投票 0

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

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

回答 5 投票 0

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

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

回答 1 投票 0

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

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

回答 7 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.