​#### Highcharts.line 折线图

// create the chart
Highcharts.chart('container', {
	chart: {
		type: 'spline', // 曲线
		// inverted: false // true xy轴旋转
	},
	title: { // 标题
  	    text: '月平均气温'
        },
        subtitle: { // 副标题
  	    text: '数据来源: WorldClimate.com'
        },
	xAxis: {
	    categories: [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]
	},
	plotOptions: {
	  line: { // 基础折现图
            dataLabels: {
              // 开启数据标签 显示点的数值
              enabled: true          
            },
          // 关闭鼠标跟踪,对应的提示框、点击事件会失效
          enableMouseTracking: false
         },
	spline: { // 平滑折线图
	   marker: { // 标注点设计
		radius: 4,
		lineColor: '#666666',
		lineWidth: 1
	  }
	},
	series: {
	  allowPointSelect: true, // 允许点选择
	  point: { // 标注点的事件
		events: {
		  select: function () {
			var text = this.category + ': ' + this.y + ' was last selected',chart = this.series.chart;
			if (!chart.lbl) {
				chart.lbl = chart.renderer.label(text, 100, 70).attr({
					padding: 10,
					r: 5,
					fill: Highcharts.getOptions().colors[1],
					zIndex: 5
				}).css({  color: '#FFFFFF'  }).add();
			} else {
				chart.lbl.attr({ text: text });
			}
		}
	}
    }
  }
},
series: [{
	name: '苹果',
	data: [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]
  },{
	name: '香橙',
	data: [2,3,4,5,6,7,8,9,10,11,12,43,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]
  },{
	name: '葡萄',
	data: [13,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]
  }]
});

posted on 2023-01-02 21:32  羽丫头不乖  阅读(24)  评论(0编辑  收藏  举报