highcharts 相关问题

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

highcharts 没有导出成员“ChartObject”

我想为我的 Angular 4 项目设置 highcharts，但我不断收到此错误： highcharts 没有导出成员“ChartObject” 我努力了， 角高图表， Highcharts-angualr， ng2-

angular typescript highcharts
回答 2 投票 0

自定义数据标签 SVG 不会出现在导出 png 或 pdf highcharts 中

我有倒立柱形图，在每个数据点的末尾，我设置了自定义 SVG 图标以及一些文本 绘图选项：{ 柱子： { 点宽度：1， 光标：'指针'， 数据标签：{ ...

highcharts
回答 1 投票 0

更改特定点的工具提示

我在高图表的工具提示上有一个按钮。 我想更改按钮单击时特定点的工具提示。 我在高图表的工具提示上有一个按钮。 我想更改按钮单击特定点的工具提示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Highcharts Editable Data Label</title> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <div id="container" style="width: 600px; height: 400px;"></div> 以下是脚本 Highcharts.AST.bypassHTMLFiltering = true; Highcharts.chart('container', { chart: { type: 'line' }, tooltip: { useHTML: true, formatter: function() { // Return the default tooltip content var tooltip = '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 2); // Add a button to the tooltip tooltip += '<br/><button onclick="changeTooltip(' + this.point.index + ')">Change Tooltip</button>'; return tooltip; }, style: { pointerEvents: 'auto' } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); // Function to change tooltip for a specific point function changeTooltip(pointIndex) { Highcharts.charts[0].update({ tooltip: { formatter: function() { // Customize tooltip for this point return 'Customized Tooltip for Point '; }, useHTML: true }}) } 我已经尝试过上面的代码，但是当单击按钮时，所有点的工具提示都会发生变化。 也尝试过 point.update({tooltip: { formatter: function() { // Customize tooltip for this point return 'Customized Tooltip for Point '; }, useHTML: true }}); 但是什么也没发生 有多种方法可以做到这一点。 我在这里所做的方法是对代码进行三处更改： 添加一个名为 customToolTips 的全局数组变量 在你的changeTooltip()中设置该变量 访问格式化程序中的变量：function() 查看代码片段中的编辑。 请注意，单击“更改工具提示”按钮后，您必须离开该点然后再返回该点，才能看到新的工具提示文本。 Highcharts.AST.bypassHTMLFiltering = true; Highcharts.chart('container', { chart: { type: 'line' }, tooltip: { useHTML: true, formatter: function() { // Return the default tooltip content var tooltip = '<b>' + this.series.name + '</b><br/>' if( customToolTips.length > this.point.index && customToolTips[this.point.index] ) { // Add the custom tooltip text tooltip += customToolTips[this.point.index]; } else { // Original (non-custom) text tooltip += Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' } tooltip += Highcharts.numberFormat(this.y, 2); // Add a button to the tooltip tooltip += '<br/><button onclick="changeTooltip(' + this.point.index + ')">Change Tooltip</button>'; return tooltip; }, style: { pointerEvents: 'auto' } }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }] }); let customToolTips = []; // Function to change tooltip for a specific point function changeTooltip(pointIndex) { // NOTE Store some custom text customToolTips[pointIndex] = `<div class="Custom">THIS IS CUSTOM for #${pointIndex}</div>`; } .container { margin: 10px; border: solid 4px yellow; } .Custom { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="width: 600px; height: 400px;"></div>

javascript jquery highcharts
回答 1 投票 0

Highcharts - 我可以在同一 x 轴和 y 轴上拥有多个时间线的图表吗？

我想创建一个有n条时间线的图表，只有一个y轴和一个y轴，这样我就可以将它们与相同的日期范围进行比较。 我尝试组合两个图表（线图和散点图），并且我得到了

highcharts react-highcharts
回答 1 投票 0

更改 Highcharts 地图上的地图颜色，并根据最小值和最大值显示颜色

我有一个vue项目，我试图在世界地图上显示数据，但我无法更改地图上的颜色。我希望地图在 colorAxis 选项中使用 minColor 和 maxColor 但它...

javascript vue.js highcharts colors
回答 1 投票 0

highcharts：类型错误：无法读取未定义的属性“0”

我正在尝试将 REST API 中的一些数据输入 HighCharts，但收到错误：TypeError：无法读取未定义的属性“系列”。 从 API 获取数据： $scope.myData = 函数...

javascript angularjs highcharts
回答 2 投票 0

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

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

javascript highcharts
回答 1 投票 0

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

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

javascript jquery callback highcharts
回答 2 投票 0

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

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

javascript css angular highcharts angular2-highcharts
回答 1 投票 0

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

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

python highcharts plotly-dash
回答 1 投票 0

highchart 隐藏 xaxis 类别

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

javascript jquery css highcharts
回答 1 投票 0

Highcharts 箱线图 y 轴

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

javascript highcharts
回答 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>

highcharts puppeteer-sharp
回答 0 投票 0

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

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

r highcharts r-highcharter
回答 4 投票 0

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

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

javascript highcharts
回答 5 投票 0

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

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

javascript highcharts
回答 2 投票 0

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

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

javascript highcharts
回答 2 投票 0

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

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

angular highcharts
回答 2 投票 0

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

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

javascript highcharts export export-to-excel
回答 1 投票 0

Highchart 从图表中删除系列 1

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

javascript highcharts
回答 1 投票 0
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.