highcharts

1. 仪表盘solidgauge c.init is not a function

用仪表盘老是报错c.init is not a function ，原来highcharts-more.js插件需要配置在最上面

import Highcharts from "highcharts";
import SolidGauge from "highcharts/modules/solid-gauge";
import HighChartsMore from "highcharts/highcharts-more.js";

// 初始化导出模块
HighChartsMore(Highcharts);
SolidGauge(Highcharts);

Solidgauge chart #21

2. 仪表盘宽度

仪表盘背景宽度：

  pane: {
    center: ["50%", "50%"],
    size: "60%",
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: "#EEE",
      innerRadius: "85%", //仪表盘背景宽度
      outerRadius: "100%",
      shape: "arc"
    }
  },

仪表盘数据宽度：

  plotOptions: {
    solidgauge: {
      innerRadius: "85%", //仪表盘数据宽度
    }
  },

3. 外面的button触发chart全屏

看了各种轮子说法，尝试都不行，扒开highcharts@7.1.2

full-screen.src.js

H.FullScreen = function (container) {
    this.init(container.parentNode); // main div of the chart
};

H.FullScreen.prototype = {
    /**
     * Init function
     *
     * @param {HTMLDOMElement} - chart 
     *div
     */
    init: function (container) {
        if (container.requestFullscreen) {
            container.requestFullscreen();
        } else if (container.mozRequestFullScreen) {
            container.mozRequestFullScreen();
        } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
        } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        }
    }
};

container就是挂载chart的元素，直接调用requestFullscreen就行了，就是如此简单。

4. 纵坐标的数据显示在顶端

const options = {
  exporting: {
    enabled: false
  },
  credits: false,
  title: {
    text: null
  },
  plotOptions: {
    area: {
      stacking: "normal"//需要设置
    }
  },
  xAxis: {
    categories: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月"
    ],
    crosshair: true
  },
  yAxis: [
    {
      // type: "logarithmic",
      title: {
        text: null
      },
      min: 0,
      stackLabels: {
        enabled: true, // 在顶端显示数值
        allowOverlap: true, // 数值过长，也要显示出来
        rotation: 340,//设置倾斜角度防止数值重叠
        padding: 0,
        style: {
          fontWeight: "normal"
        },
        formatter() {
          return this.total;//格式化数字 不然会三个数字一组 中间加了空格，这样显示会节省空间
        }
      }
    }
  ],
  chart: {
    type: "area"
  },
  series: [
    {
      showInLegend: false,
      name: "数量",
      data: [1, 2, 3]
    }
  ]
};

area chart

通过上述方式再小的数据也会显示在坐标中。

参考：
DataLabels not shown in chart