Flot 堆积条形图并在鼠标悬停时显示条形值

JS

使用Flot库可以轻松地创建各种类型的图表，包括堆积条形图。在这篇文章中，我们将介绍如何使用Flot库创建一个堆积条形图，并在鼠标悬停时显示每个条形的值。

首先，让我们来看一下如何使用Flot库创建一个基本的堆积条形图。我们将使用一个简单的例子来说明。假设我们有两个月份的销售数据，分别是1月和2月，每个月的销售额分为两个部分：产品A和产品B的销售额。

首先，我们需要引入Flot库。确保在HTML文件中引入了Flot库的脚本文件。

html
<script src="JSdelivr.net/npm/flot@4.2.0/jquery.flot.JS">https://cdn.JSdelivr.net/npm/flot@4.2.0/jquery.flot.JS</a>"></script>

然后，我们需要准备一些数据来显示在堆积条形图中。我们可以将数据定义为一个包含多个系列的数组。每个系列都有一个名称和一组数据点。在我们的例子中，我们有两个系列：产品A和产品B的销售额。每个系列都有两个数据点：1月和2月的销售额。

Javascript
var data = [
  { label: "产品A", data: [[1, 100], [2, 150]] },
  { label: "产品B", data: [[1, 200], [2, 250]] }
];

接下来，我们需要为堆积条形图创建一个容器。这可以通过在HTML文件中添加一个具有唯一ID的元素来完成。

html
<div id="stacked-bar-chart"></div>

现在，我们可以使用Flot库的plot函数来创建堆积条形图。我们需要指定容器的ID、数据和一些其他选项，如图表的类型和标签显示方式。

Javascript
$.plot("#stacked-bar-chart", data, {
  series: {
    stack: true,
    bars: {
      show: true,
      barWidth: 0.6,
      align: "center"
    }
  },
  xaxis: {
    ticks: [[1, "1月"], [2, "2月"]]
  },
  yaxis: {
    tickFormatter: function(value) {
      return value + "元";
    }
  },
  grid: {
    hoverable: true
  },
  tooltip: {
    show: true,
    content: function(label, xval, yval) {
      return label + ": " + yval + "元";
    }
  }
});

在上面的代码中，我们设置了堆积条形图的一些选项。我们将系列的stack属性设置为true，以将条形堆积在一起。我们还设置了条形的宽度和对齐方式。我们使用xaxis选项来设置X轴的刻度标签，使用yaxis选项来设置Y轴的刻度格式化函数，以便在刻度上显示金额单位。我们还启用了鼠标悬停功能，并使用tooltip选项来定义提示框的内容。

以上就是使用Flot库创建堆积条形图并在鼠标悬停时显示条形值的全部步骤。您可以根据自己的需求进行定制和调整。

案例代码：

html
<!DOCTYPE html>
<html>
<head>
  <title>堆积条形图</title>
  <script src="https://cdn.JSdelivr.net/npm/jquery/dist/jquery.min.JS"></script>
  <script src="JSdelivr.net/npm/flot@4.2.0/jquery.flot.JS">https://cdn.JSdelivr.net/npm/flot@4.2.0/jquery.flot.JS</a>"></script>
</head>
<body>
  <h1>堆积条形图</h1>
  <div id="stacked-bar-chart"></div>
  <script>
    var data = [
      { label: "产品A", data: [[1, 100], [2, 150]] },
      { label: "产品B", data: [[1, 200], [2, 250]] }
    ];
    $.plot("#stacked-bar-chart", data, {
      series: {
        stack: true,
        bars: {
          show: true,
          barWidth: 0.6,
          align: "center"
        }
      },
      xaxis: {
        ticks: [[1, "1月"], [2, "2月"]]
      },
      yaxis: {
        tickFormatter: function(value) {
          return value + "元";
        }
      },
      grid: {
        hoverable: true
      },
      tooltip: {
        show: true,
        content: function(label, xval, yval) {
          return label + ": " + yval + "元";
        }
      }
    });
  </script>
</body>
</html>

效果图：


：

在本文中，我们学习了如何使用Flot库创建堆积条形图，并在鼠标悬停时显示每个条形的值。我们通过一个简单的例子演示了如何使用Flot库的plot函数来创建堆积条形图，并设置了一些选项来自定义图表的外观和行为。您可以根据自己的需求进行进一步的定制和调整。Flot库是一个功能强大且易于使用的图表库，适用于各种数据可视化需求。希望本文对您有所帮助！