Vue Highchart中chart属性

官网图表配置

本节主要讲解图表配置，对应的 API 位置为 chart，主要内容包括图表全局样式、绘图区、图表事件、等相关内容。

对于 C语言风格的开发者来说，下面的方式更符合编写习惯


var oiptions = new Object();

options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'line';

options.series = new Array();
options.series[0] = new Object();
options.series[0].name = '小明';
options.series[0].data = new Array(1, 0, 4);

上述编写方式在 JS 里是不推荐的，更好的做法应该是


var options = {
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    series: [{
        name: '小明',
        data: [1, 0, 4]
    }]
}

1、图表类型

通过 chart.type 来指定图表类型，表示如果默认图表类型，即如果 series 中没有指定 type， 那么图表的类型就由该属性来确定。highcharts 支持的所有图表类型见 plotOptions。

2、图表缩放

图表缩放包括缩放（zoom）和平移（pan），对应的属性有：

• zoomType ： 缩放类型，值可以是 “x”、“y”、“xy”，分别表示水平缩放、竖直缩放、平面缩放
• 缩放恢复按钮：可以指定按钮的样式、位置等，见 resetZoomButton，按钮的文字可以通过 lang 中的属性来指定
• selectionMarkerFill ：选中背景色，详细参考 API 文档
• panKey：平移键，默认是 “Shift”，即在启用平移后，按住指定的按键即可对图表进行平移操作，在线试一试
• panning ： 是否启用平移，启用平移后，按住平移键，然后就可以用鼠标对图表进行平移操作（即平移操作是平移键加鼠标拖动）

• chartOptions: {
    chart: {
      type: 'line',
      zoomType: 'x',
      panning: true,
      panKey: 'shift'
    },
    title: {
      text: "物联网数据"
    },
    subtitle: {
      text: "数据来源：物联网平台"
    },
    xAxis: {
  
      categories: []
    },
    yAxis: {
      title: {
        text: this.attribute
      }
    },
    legend: {
      layout: "vertical",
      align: "right",
      verticalAlign: "middle"
    },
  
    series: [
      {
        name: this.attribute,
        data: []
      },
  
    ],
    responsive: {
      rules: [
        {
          condition: {
            maxWidth: 500
          },
          chartOptions: {
            legend: {
              layout: "horizontal",
              align: "center",
              verticalAlign: "bottom"
            }
          }
        }
      ]
    }
  },

　　

3、其他

• 图表反转 ： 图表反转指的是将图表的 x轴和 y轴进行对调操作，对应的只需要设置 chart.inverted = true 即可。
• 图表动画 ：chart.animation 可以设置图表的全局动画效果，这里的动画指的是图表更新时的动画效果，而图表初始化的动画是在 plotOptions.series.animation 中启用和关闭的。
• 图表自适应 ：前面说过通过设置图表容器的 min-width 可以让图表自适应，这个开关对应的属性是 chart.reflow，另外，还可以通过 API 接口 Chart.reflow 在外部对图表进行自适应操作，在线试一试