Highcharts

highchart滚动条应用--highcharts/highstock应用目标1. 须要固定图例和y轴，然而x轴须要滚动的状况引入1. 不能像一般表格一样引入highcharts，只须要引入highcharts/highstock2. 应用import HighStock from 'highcharts/highstock' 替换 import HighStock from 'highcharts'应用1. 应用形式上用HighStock.stockChart代替highcharts.chart成果 残缺代码ceshi.vue文件 <template> <div class="vue3"> <div id="container" style="height: 400px; min-width: 320px; max-width: 600px; margin: 0 auto"></div> </div></template><script>import HighStock from 'highcharts/highstock'export default { data() { return {} }, mounted() { var chart = HighStock.stockChart('container', { chart: { type: 'bar', marginLeft: 150 }, title: { text: '截止 2016年4月 Highcharts 最受欢迎的性能需要' }, subtitle: { text: 'Source: <a href="https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api">UserVoice</a>' }, xAxis: { type: 'category', title: { text: null }, min: 0, max: 4, scrollbar: { enabled: true }, tickLength: 0 }, yAxis: { min: 0, max: 1200, title: { text: '投票数', align: 'high' } }, plotOptions: { bar: { dataLabels: { enabled: true } } }, legend: { enabled: false }, credits: { enabled: false }, series: [{ name: '投票', data: [ ["甘特图", 1000], ["主动计算趋势线", 575], ["减少导航器用于多个数据列", 523], ["动静调整图表字体", 427], ["多坐标轴及对其形式管制", 399], ["不规则工夫的重叠图", 309], ["图表高度依据图例高度自适应", 278], ["图表数据导出为 Excel 文件", 239], ["图例切换", 235], ["韦恩图", 203], ["范畴选择器可调整地位", 182], ["可拖动的图例", 157], ["桑基图", 149], ["Highstock Y轴滚动条", 144], ["x轴分组", 143], ["ReactJS 插件", 137], ["3D 曲面图", 134], ["在股票图中数据分析线", 118], ["数据库功能模块", 118], ["可拖动的点", 117] ] }] }); }}</script><style> #container { width: 500px; }</style>注：如果须要去掉左侧的缩放管制条，则能够采纳只有管制条的形式，用max来管制改成引入 import Highcharts from "highcharts"; import highstock from 'highcharts/modules/stock' highstock(Highcharts);应用new Highcharts.Chart('container', {}）去创立曲线即可。 ...

highchart的draggable-points.js依赖实现图表的动静拖拽操作需要实现一个曲线图，可能通过鼠标去拖拽点，来进行批改图表 实现例子基于vue来实现，如果是jq的依照官网的例子即可，配置列表链接.，例子 // 引入依赖import Highcharts from 'highcharts/highcharts.js';import draggable from 'highcharts/modules/draggable-points.js'// 注册拖拽事件draggable(Highcharts);// 要害配置plotOptions: { dragDrop: { draggableY: true, // 启用y轴拖拽 dragPrecisionY: 0.1 // 拖拽步长 }, point: { events: { // 拖拽过程事件 drag: function(event) { // console.log('拖动', event) }, // 拖拽完结事件 drop: function(evt) { } } }总结vue中拖拽依赖引入，须要用hichart对象进行注册，其余的依赖也是同样的注册形式来应用