讓你的 highcharts支持maxPointWidth屬性

reclay 發布于2019-08-01 15:06 / 2908人閱讀

摘要：我們在設置圖表時候經常會動態設置數據列的寬度，但是如果數量較少的話經常會比較難看，于是我們會想到限制一個最大寬度。這段代碼應該適合你。添加完代碼后在你的屬性里增加這個設置就可以完成對最大寬度的支持了。顆最大寬度采用寬度

我們在設置圖表時候經常會動態設置數據列的寬度，但是如果數量較少的話,經常會比較難看，于是我們會想到限制一個最大寬度。這段代碼應該適合你。

 (function(H) {
     var each = H.each;
     H.wrap(H.seriesTypes.column.prototype, "drawPoints", function(proceed) {
         var series = this;
         if (series.data.length > 0) {
             var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
             each(this.data, function(point) {
                 point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
                 point.shapeArgs.width = width;
             });
         }
         proceed.call(this);
     })
 })(Highcharts);

添加完代碼后,在你的Highcharts屬性里增加這個,設置就可以完成對最大寬度的支持了。

series: [{
  // ....
    data: data["series"]["stars"],
    tooltip: {
        valueSuffix: " 顆"
    },
    maxPointWidth: 30,  //  最大寬度 采用svg寬度

}]

云服務器 GPU云服務器你的網頁不支持webrtc 對象不支持屬性或方法 maxPointWidth Highchart

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49766.html

讓你的 highcharts支持maxPointWidth屬性

摘要：我們在設置圖表時候經常會動態設置數據列的寬度，但是如果數量較少的話經常會比較難看，于是我們會想到限制一個最大寬度。這段代碼應該適合你。添加完代碼后在你的屬性里增加這個設置就可以完成對最大寬度的支持了。顆最大寬度采用寬度 showImg(https://segmentfault.com/img/bVtrs5); 我們在設置圖表時候經常會動態設置數據列的寬度，但是如果數量較少的話,經常會比...

lncwwn 2019-08-19 17:49 評論0 收藏0
14個最好的 JavaScript 數據可視化庫

摘要：適用于，演示這是開發的一個簡單的可視化庫，它允許你創建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等。可以輕松地對折線圖和條形圖進行混合和匹配以組合不同的數據集，這是非常棒的功能。翻譯：瘋狂的技術宅原文：https://www.monterail.com/blo... 本文首發微信公眾號：jingchengyideng歡迎關注，每天都給你推送新鮮的前端技術文章你的程序有多...

Mertens 2019-08-23 16:23 評論0 收藏0
web入門+書籍推薦

摘要：這里我也給大家推薦一些數據可視化的圖形庫不過這些圖形庫一般需要一些的基礎知識輸入數據即可生成圖形，自由發揮程度較低百度出品，與很像，個人覺得略丑推薦，但不適合新手，圖表漂亮，靈活性高以上都可以先去閱讀官方文檔未完待續如果你想建立一個自己的網站，你可以從網上搜到許多的教程：比如 wordpress gitpages 等等。如果你想了解這個框架是怎么工作的，你可以了解以下下面的三個...

suosuopuo 2019-08-19 18:37 評論0 收藏0