Vue Highcharts 無資料時提示

Highcharts 的折線圖和圓餅圖有自帶無資料提示的 API,不過需要引入 no-data-to-display.js 才會生效。

效果

image Vue Highcharts 無資料時提示
image 1 Vue Highcharts 無資料時提示

使用方式

// import HighchartsNoData
import Highcharts from "highcharts";
import HighchartsNoData from "highcharts/modules/no-data-to-display";

HighchartsNoData(Highcharts);

options 中加入 lang.noData 無資料提示內容、noData.style 為無資料提示內容的樣式:(如果設 noData.useHTML 為 true 的話 lang.noData 就可以使用 html 內容)

options: {
   title: {
      text: null,
   },
   // ...
   lang: {
      noData: "暫無資料"
   },
   noData: {
      style: {
         fontSize: "1rem",
         color: "#777777"
      }
   },

   xAxis: {
     // ...
   },

   yAxis: {
     // ...
   },

   series: [],
}

更多屬性請參考官方文檔:https://api.highcharts.com/highcharts/noData

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論