【Highchar】两图联动配置

最新推荐文章于 2025-07-15 10:06:52 发布

原创最新推荐文章于 2025-07-15 10:06:52 发布 · 803 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#highchart #前端

前端专栏收录该内容

31 篇文章

订阅专栏

本文详细介绍了Highcharts库中实现两个图表联动的配置方法，适用于前端开发中需要交互式数据展示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

highchart常用的两图联动配置写法

 chart: {
        type: 'area',
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        backgroundColor: 'transparent',
        spacing: [10, 0, 10, 0],
       
      },
      xAxis: [{
        categories: [1,2,3],
        crosshair: {
          width: 1,
        },
         top: '-50%',
      },
      {
        categories: [4,5,6],
        crosshair: {
          width: 1,
        },
      }
      ],

      yAxis: [
        {
          title: {
            align: 'high',
            text: '百分比(%)',
            offset: 0,
            rotation: 0,
            y: 10,
          },
          crosshair: {
          width: 1,
        },
          height: '50%',
          labels: {
            formatter() {
              return `${(this.value * 100).toFixed(0)}`;
            },
          },
        },
        {
          title: {
            align: 'high',
            //text: 'R方',
            offset: 0,
            rotation: 0,
            x: -5,
            y: 10,
          },
          opposite: false,
          top: '65%',
          height: '45%',
          offset: 0,
        },
      ],

      plotOptions: {
        area: {
          stacking: 'normal',
          marker: {
            enabled: true,
            radius: 1,
          },
        },
        line: {
          marker: {
            enabled: true,
            radius: 1,
          },
        },
      },

      tooltip: {
        shared: true,
        
      },

    series: [
    	{
        	data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    	},
	    {
	    	type: 'line',
	    	yAxis: 1,
	   		 xAxis:1,
	        data: [29.9, 71.5, 106.4, 129.2, 134.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
	    }
    ]