HighCharts相关问题

目录

初始化

图表操作

更新图表

各类图表

仪表图

---

分享遇到的关于highcharts的使用问题，大部分是需要详细阅读官方api文档才能解决的问题

初始化

不带new关键字

var myChart = Highcharts.chart(this.chartId, this.options);

带new关键字

var myChart = new Highcharts.Chart(this.chartId, this.options);

图表操作

更新图表

chart.update()

官方文档

可以手动更新图表，当图中信息有更新时使用，有平滑的更新动画

例如：

watch: {
    data: {
      handler(newData, oldData) {
        this.data = newData;
        this.myChart.update(this.options);
      },
    },
  },

完整代码：

<template>
  <div :id="chartId" style="height: 300px"></div>
</template>
​
<script>
import Highcharts, { color } from "highcharts/highstock";
export default {
  props: {
    title: String,
    data: Array,
    value: Number,
  },
  data() {
    return {
      myChart: "",
      chartId: "",
      options: {
        chart: {
          type: "line",
        },
        title: {
          text: this.title ? this.title : "",
        },
        credits: {
          enabled: false,
        },
        subtitle: {
          // text: "数据来源: WorldClimate.com",
        },
        xAxis: {
          // 横坐标
          categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        yAxis: {
          title: {
            // 纵坐标单位
            text: "帕斯卡 (Pa)",
          },
        },
        plotOptions: {
          line: {
            dataLabels: {
              // 开启数据标签
              enabled: true,
            },
            // 关闭鼠标跟踪，对应的提示框、点击事件会失效
            enableMouseTracking: false,
          },
        },
        series: [
          // 配置数据
          {
            name: this.title,
            data: this.data,
          },
        ],
      },
    };
  },
  created() {
    this.chartId = "line-chart-" + this.value;
  },
  mounted() {
    this.initChart();
  },
  watch: {
    data: {
      handler(newData, oldData) {
        this.data = newData;
        this.myChart.update(this.options);
      },
    },
  },
  methods: {
    initChart() {
      this.myChart = Highcharts.chart(this.chartId, this.options);
      // this.myChart.redraw();
    }
​
  },
};
</script>
​
<style scoped>
</style>

提示：调用chart.redraw()函数不会使数据更新

各类图表

仪表图

options.series中设置overshoot表示允许指针超过刻度盘的范围

参考官方文档

例如：

series: [{
          name: '健康状态',
          data: [50],
          overshoot: 0, // 不允许超过刻度盘大小
        }]

options.pane中设置表盘背景

参考官方文档

pane: [{
          // center: ['25%', '145%'],   // 设置指针中心位置
          startAngle: -90,
          endAngle: 90,
          background: [{
            shape: 'arc',   // 设置背景为半圆
          }]
        }],

options.yAxis.tickPositions中设置自定义刻度

options.yAxis.plotBands中设置表盘颜色

yAxis: {
          min: 0,
          max: 15,
          minorTicks: false,
          tickPositions:[0, 1.8, 2.8, 7.1, 15],
          tickWidth: 1,
          tickPosition: 'inside',
          tickLength: 30,
          tickColor: '#555',
          tickInterval: 10,
          labels: {
            distance:20,
            reserveSpace:true,
            // allowOverlap: true,
            y: 0,
            // x: 50,
            step: 1,
            rotation: 'auto'
          },
          pane: 0,
          title: {
            text: '健康状态'
          },
          plotBands: [{
            from: 0,
            to: 1.8,
            color: '#70ad47', // green
            thickness: 30
          }, {
            from: 1.8,
            to: 2.8,
            color: '#5B9BD5', // blue
            thickness: 30
          }, {
            from: 2.8,
            to: 7.1,
            color: '#FFC000', // yellow
            thickness: 30
          },
            {
              from: 7.1,
              to: 71,
              color: '#FF5050', // red
              thickness: 30
            }]
        },

 

完整的options配置：

options: {
        chart: {
          type: 'gauge',
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false,
        },
        title: {
          text: '健康状态'
        },
        pane: [{
          startAngle: -90,
          endAngle: 90,
          background: [{
            shape: 'arc',
          }]
        }],
        // the value axis
        yAxis: {
          min: 0,
          max: 15,
          minorTicks: false,
          tickPositions:[0, 1.8, 2.8, 7.1, 15],
          tickWidth: 1,
          tickPosition: 'inside',
          tickLength: 30,
          tickColor: '#555',
          tickInterval: 10,
          labels: {
            distance:20,
            reserveSpace:true,
            // allowOverlap: true,
            y: 0,
            // x: 50,
            step: 1,
            rotation: 'auto'
          },
          pane: 0,
          title: {
            text: '健康状态'
          },
          plotBands: [{
            from: 0,
            to: 1.8,
            color: '#70ad47', // green
            thickness: 30
          }, {
            from: 1.8,
            to: 2.8,
            color: '#5B9BD5', // blue
            thickness: 30
          }, {
            from: 2.8,
            to: 7.1,
            color: '#FFC000', // yellow
            thickness: 30
          },
            {
              from: 7.1,
              to: 71,
              color: '#FF5050', // red
              thickness: 30
            }]
        },
        credits:{
          enabled: false // 禁用版权信息
        },
        series: [{
          name: '健康状态',
          data: [50],
          // data: [this.limitToHigh(this.healthValue)],
          tooltip: {
            valueSuffix: ''
          },
          overshoot: 0, // 不允许超过刻度盘大小
        }]
      },