vue项目中使用highcharts记录(甘特图)_highcharts-gantt 用法vue

使用npm添加到项目中：

npm install highcharts 
npm install highcharts-vue

//  我在实际使用时用上面两条命令安装后，引入时会报错
//  所以按照下面的示例中的版本安装的指定版本(vue版本为2.6.14)

npm install highcharts@7.1.3
npm install highcharts-vue@1.3.5
1
2
3
4
5
6
7
8

示例：https://codesandbox.io/embed/vue-template-c6tq8

在main.js中引入

import Highchart from "highcharts/highcharts";
import HighchartsVue from "highcharts-vue";
import stockInit from "highcharts/modules/stock";

stockInit(Highchart);
Vue.use(HighchartsVue);
1
2
3
4
5
6

在页面中使用

<template>
  <div>
    <highcharts :options="chartOptions" :callback="myCallback"></highcharts>
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    data() {
      return {
        chartOptions: {
          chart: {
            type: 'xrange'  //指定图表的类型，默认是折线图（line）
          },
          title: {
            text: '简易甘特图'
          },
          xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
              week: '%Y/%m/%d'
            }
          },
          yAxis: {
            title: {
              text: ''
            },
            categories: ['制作产品原型', '开发', '测试'],
            reversed: true
          },
          tooltip: {
            dateTimeLabelFormats: {
              day: '%Y/%m/%d'
            }
          },
          series: [{
            name: '项目1',
            // pointPadding: 0,
            // groupPadding: 0,
            borderColor: 'gray',
            pointWidth: 20,
            data: [{
              x: Date.UTC(2014, 10, 21),
              x2: Date.UTC(2014, 11, 2),
              y: 0,
              partialFill: 0.25
            }, {
              x: Date.UTC(2014, 11, 2),
              x2: Date.UTC(2014, 11, 5),
              y: 1
            }, {
              x: Date.UTC(2014, 11, 8),
              x2: Date.UTC(2014, 11, 9),
              y: 2
            }, {
              x: Date.UTC(2014, 11, 9),
              x2: Date.UTC(2014, 11, 19),
              y: 1
            }, {
              x: Date.UTC(2014, 11, 10),
              x2: Date.UTC(2014, 11, 23),
              y: 2
            }],
            dataLabels: {
              enabled: true
            }
          }]
        }
      };
    },
    mounted() { },
    methods: {
      myCallback() {
        console.log("this is callback function");
      }
    }
  };
</script>

<style>
  .highcharts-container {
    width: 600px;
    height: 400px;
    border: 1px solid #ddd;
    margin: auto;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

但在这个时候会报错：Highcharts error #17，经过排查发现如果type为xrange就会报这个错，推测是缺少某个文件；
发现示例中import stockInit from "highcharts/modules/stock"; 引入的有这个文件，虽然不知道干啥用的，但是可以试一下，于是在main.js中引入xrange，发现可行；

import xrangeInit from "highcharts/modules/xrange";
xrangeInit(Highchart);
1
2

最终简易甘特图就制作完成