tag highcharts

標籤
貢獻3
25
10:34 AM · Nov 24 ,2025
dirackeeko 頭像 huashenjianlingshouhuni 頭像 yourena_c 頭像

@highcharts / 博客 RSS 訂閱

dirackeeko 頭像

DiracKeeko - [highcharts] 02_02漸變色linearGradient使用説明

本文是對很早一篇文章 《[[highcharts] 02_回調函數實現高級顏色漸變]》的補充(https://segmentfault.com/a/1190000041028581) 先貼個數據的實例 stockOptions.series = { data: [2, 9, 13, null, 50, 17, 19], fillColor: { linearGradient:

highcharts , 前端

收藏 評論

yourena_c 頭像

友人A - hightchart的3d餅狀圖圖例顯示問題記錄

3d餅狀圖不顯示圖例，需要在plotOptions.pie.showInLegend設置為true var chart = Highcharts.chart('container', { chart: { type: 'pie', options3d: { enabled: true, alpha: 45,

vue.js , highcharts , 前端 , Javascript

收藏 評論

huashenjianlingshouhuni 頭像

zhanle_huang - highchart的draggable-points.js依賴實現圖表的動態拖拽操作

highchart的draggable-points.js依賴實現圖表的動態拖拽操作 需求 實現一個曲線圖，能夠通過鼠標去拖拽點，來進行修改圖表 實現 例子基於vue來實現，如果是jq的按照官網的例子即可，配置列表鏈接.，例子 // 引入依賴 import Highcharts from 'highcharts/highcharts.js'; import dragg

vue.js , highcharts , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 06_legend排序

當使用highcharts創建一個橫向放置的堆疊列的colunm圖時，highcharts繪圖實例默認是從右到左堆疊(即series中index=0的在最右邊，index=1的放在index=0的左邊)，如下圖所示，圖例legend的順序與預期順序相同，而圖中的column item順序與預期相反。(legend 1 2 3, column item 3 2 1) 想要達成同序，需要用到s

highcharts , 可視化 , 前端

收藏 評論

huashenjianlingshouhuni 頭像

zhanle_huang - highchart的draggable-points.js依賴實現圖表的動態拖拽操作

highchart的draggable-points.js依賴實現圖表的動態拖拽操作 需求 實現一個曲線圖，能夠通過鼠標去拖拽點，來進行修改圖表 實現 例子基於vue來實現，如果是jq的按照官網的例子即可，配置列表鏈接.，例子 // 引入依賴 import Highcharts from 'highcharts/highcharts.js'; import dragg

vue.js , highcharts , HTML , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 02_回調函數實現高級顏色漸變

描述: 為了讓柱狀圖顯示美觀，要求柱狀圖單柱的顏色以漸變色展示，如下圖所示。 因為highcharts使用svg渲染，而svg內的線性漸變屬性為：linearGradient，若只是為了單純的實現上圖效果，我們完全可以單獨設置每個series的color屬性。 注: 上面這張圖對應的series有兩個子元素 即 console.log(typeof(stockOpt

highcharts , 可視化 , 前端

收藏 評論

huashenjianlingshouhuni 頭像

zhanle_huang - highchart滾動條使用--highcharts/highstock

highchart滾動條使用--highcharts/highstock 使用目的 1. 需要固定圖例和y軸，但是x軸需要滾動的情況 引入 1. 不能像普通表格一樣引入highcharts，只需要引入highcharts/highstock 2. 使用import HighStock from 'highcharts/highstock' 替換 import HighStock from 'hig

vue.js , highcharts , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 04_wrap

場景: 需要對每個series設置不同背景色的tooltip時，highcharts自身沒有這種配置項，就需要我們利用Highcharts原型封裝函數Wrap。 wrap對現有的highcharts示例的原型進行修改，允許在現有函數之前或之後向其中添加自己的代碼。 其用法如下: (function (H) { H.wrap(H.Tooltip.prototype, 'ref

highcharts , 前端

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 07_在highcharts渲染完成後結束loading

vue2項目 highcharts實例，如何在highcharts渲染開始時加載loading，在渲染結束時結束loading? 好久沒寫highcharts，最近有個同事寫highcharts時遇到了一個問題。 該業務場景的數據處理非常複雜，且存在某些個特定id的情況下，數據量極大，導致頁面上的highcharts卡頓(具體表現是：點了切換之後，有一段時間沒反應，之後highcharts重新渲染

vue2 , loading , highcharts , 前端

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 01_dataGrouping 和xDateFormat失效

前言、基礎、約定 一般我們會用這種方式來使用highcharts，所需的配置都在stockOptions裏 （注：這裏命名不一定要用stockOptions，它只是一個對象） stockOptions是一個對象如下圖所示 下文我們用對象語法來介紹配置，圖中箭頭指向的”type”記作 stockOptions.chart.type （也就是 stockOptions.ch

highcharts , tooltip , 可視化 , 前端

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 03_從highcharts內向上層傳遞參數

描述: 要求點擊highcharts中的某個元素，如下圖中的藍色bubble，點擊藍色bubble將“匯添富創新未來18個月”這個參數傳遞到父元素中，父元素中有一個表格展示所點擊的bubble對應基金的詳情。 這就要求在點擊事件發生時，把參數傳遞到上一層。 下面以跳轉為例，説明如何傳遞參數 （跳轉：傳遞基金的參數，父元素處理，跳轉到指定基金的頁面） 我們在vue的meth

highcharts , 參數傳遞 , 前端

收藏 評論

huashenjianlingshouhuni 頭像

zhanle_huang - highchart的(column)柱狀圖修改圖例

(highchart的(column)柱狀圖修改圖例) 情況説明 柱狀圖的圖例默認是圓點的，如圖 要修改成方形，可以採用如下形式 plotOptions: { column: { tooltip: { pointFormat: `span style="color:{point.color}"\u25A0/span {series.n

vue.js , highcharts , 前端 , Javascript

收藏 評論

dirackeeko 頭像

DiracKeeko - [highcharts] 05_無數據處文字填充

在highcharts中沒有數據的單圖會不作圖。 在column圖中(stockOptions.chart.type = “column”) 數據為null的column不會有展示，舉例如下。 stockOptions.series.data = [0.12, 0.255, 0.176, null, 0.189, 0.121, null, 0.08] 4號、7號兩column對應的值

highcharts , 前端

收藏 評論