折线图 - Line Chart

逐闲

于 2025-04-19 11:45:00 发布

阅读量832

点赞数 24

分类专栏：数据可视化实战文章标签：数据分析数据可视化

本文链接：https://blog.csdn.net/wyzx073/article/details/147304481

版权

数据可视化实战专栏收录该内容

7 篇文章

订阅专栏

引言：

折线图是一种常用的统计图表，通过笛卡尔坐标系中的点和线来表示数值随连续时间间隔或有序类别的变化。它常用于分析事物随时间或有序类别而变化的趋势，非常适合展示数据的变化模式和规律。

定义：

折线图：由笛卡尔坐标系（直角坐标系）、点和线组成的统计图表。
用途：常用来表示数值随连续时间间隔或有序类别的变化。

关键元素：

x轴：通常用作连续时间间隔或有序类别。
y轴：用于量化的数据，如果为负值则绘制于y轴下方。
连线：连接两个相邻的数据点，显示变化趋势。

图表属性：

形状：折线
图类：统计图表
功能：趋势分析

折线图的应用场景

折线图主要用于以下几个方面：

趋势分析：分析事物随时间或有序类别而变化的趋势。
多组数据比较：分析多组数据随时间变化或有序类别的相互作用和影响。
变化方向和程度：通过折线的方向和斜率表示正/负变化及变化的程度。

示例代码详解

为了更好地理解和使用折线图，下面通过三个不同的图表库（Matplotlib、Seaborn、ECharts）来展示如何绘制折线图。

使用 Matplotlib 绘制简单折线图

import matplotlib.pyplot as plt
import numpy as np
# Data for plotting
t = np.arange(0.0, 2.0, 0.01)
s = 1 + np.sin(2 * np.pi * t)
fig, ax = plt.subplots()
ax.plot(t, s)
ax.set(xlabel='time (s)', ylabel='voltage (mV)',
       title='About as simple as it gets, folks')
ax.grid()
fig.savefig("test.png")
plt.show()

在这里插入图片描述

使用 numpy 生成数据点。
使用 matplotlib.pyplot 创建折线图。
设置X轴和Y轴标签及标题。
添加网格线提高可读性。

使用 Seaborn 绘制多组数据的折线图

import seaborn as sns
sns.set_theme(style="ticks")
dots = sns.load_dataset("dots")
# Define the palette as a list to specify exact values
palette = sns.color_palette("rocket_r")
# Plot the lines on two facets
sns.relplot(
    data=dots,
    x="time", y="firing_rate",
    hue="coherence", size="choice", col="align",
    kind="line", size_order=["T1", "T2"], palette=palette,
    height=5, aspect=.75, facet_kws=dict(sharex=False),
)

在这里插入图片描述

使用 seaborn 库加载数据集。
设置主题样式。
使用 relplot 函数绘制多组数据的折线图。
通过 hue、size 和 col 参数实现多维度的数据展示。
调整颜色调色板和图表尺寸。

使用 ECharts 绘制动态折线图

import * as echarts from 'echarts';
var ROOT_PATH = 'https://echarts.apache.org/examples';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
$.get(
  ROOT_PATH + '/data/asset/data/life-expectancy-table.json',
  function (_rawData) {
    run(_rawData);
  }
);
function run(_rawData) {
  const countries = [
    'Finland',
    'France',
    'Germany',
    'Iceland',
    'Norway',
    'Poland',
    'Russia',
    'United Kingdom'
  ];
  const datasetWithFilters = [];
  const seriesList = [];
  echarts.util.each(countries, function (country) {
    var datasetId = 'dataset_' + country;
    datasetWithFilters.push({
      id: datasetId,
      fromDatasetId: 'dataset_raw',
      transform: {
        type: 'filter',
        config: {
          and: [
            { dimension: 'Year', gte: 1950 },
            { dimension: 'Country', '=': country }
          ]
        }
      }
    });
    seriesList.push({
      type: 'line',
      datasetId: datasetId,
      showSymbol: false,
      name: country,
      endLabel: {
        show: true,
        formatter: function (params) {
          return params.value[3] + ': ' + params.value[0];
        }
      },
      labelLayout: {
        moveOverlap: 'shiftY'
      },
      emphasis: {
        focus: 'series'
      },
      encode: {
        x: 'Year',
        y: 'Income',
        label: ['Country', 'Income'],
        itemName: 'Year',
        tooltip: ['Income']
      }
    });
  });
  option = {
    animationDuration: 10000,
    dataset: [
      {
        id: 'dataset_raw',
        source: _rawData
      },
      ...datasetWithFilters
    ],
    title: {
      text: 'Income of Germany and France since 1950'
    },
    tooltip: {
      order: 'valueDesc',
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      nameLocation: 'middle'
    },
    yAxis: {
      name: 'Income'
    },
    grid: {
      right: 140
    },
    series: seriesList
  };
  myChart.setOption(option);
}
option && myChart.setOption(option);