1. Python技术站首页
  2. 其他
  3. Java

FusionCharts图表显示双Y轴双(多)曲线

• Java

要讲解“FusionCharts图表显示双Y轴双(多)曲线”，我们需要了解以下几个方面：

  1. FusionCharts的基本使用：
    FusionCharts是一种可以创建多种类型图表的强大JavaScript库。使用FusionCharts的步骤如下：
  2. 引入FusionCharts库文件；
  3. 创建一个用于显示图表的空间；
  4. 创建一个包含图表属性和数据的JSON对象；

  5. 调用FusionCharts的构造函数，并传入上一步创建的JSON对象以及用于显示图表的空间的ID。

  6. FusionCharts的多Y轴支持：
    FusionCharts支持在一个图表中显示多个Y轴，以便可以比较不同参数之间的趋势。要显示多个Y轴，需要在JSON对象中设置以下属性：

  7. "yAxis": [{"title": "Y轴1名称"},{"title": "Y轴2名称"}]}；

  8. "dataset": [{"seriesname": "曲线1名称", "renderas": "line", "data": [{"value": "曲线1数据1", "yaxis": "1"}, {"value": "曲线1数据2", "yaxis": "1"}]}, {"seriesname": "曲线2名称", "renderas": "line", "data": [{"value": "曲线2数据1", "yaxis": "2"}, {"value": "曲线2数据2", "yaxis": "2"}]}]。

  9. FusionCharts的多曲线支持：
    FusionCharts支持在一个图表中显示多条曲线，以便可以比较不同曲线之间的趋势。要显示多条曲线，需要在JSON对象中设置以下属性：

  10. "dataset": [{"seriesname": "曲线1名称", "renderas": "line", "data": [{"value": "曲线1数据1", "yaxis": "1"}, {"value": "曲线1数据2", "yaxis": "1"}]}, {"seriesname": "曲线2名称", "renderas": "line", "data": [{"value": "曲线2数据1", "yaxis": "1"}, {"value": "曲线2数据2", "yaxis": "1"}]}]}。

有了上面的基础知识，我们可以开始创建双Y轴双曲线的FusionCharts图表了。步骤如下：

  1. 在页面中引入FusionCharts的库文件。
<script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
  1. 创建一个用于显示图表的空间。
<div id="chart-container"></div>
  1. 创建一个包含图表属性和数据的JSON对象。
{
  "chart": {
    "caption": "双Y轴曲线图表",
    "xaxisname": "X轴名称",
    "yaxisname": "Y轴1名称",
    "yAxisNameSecondary": "Y轴2名称",
    "palettecolors": "0075c2,1aaf5d",
    "showvalues": "0",
    "legendborderalpha": "0",
    "legendshadow": "0",
    "legendposition": "right",
    "showalternatehgridcolor": "1",
    "numdivlines": "5",
    "linethickness": "3",
    "basefontcolor": "#333333",
    "basefontsize": "12",
    "bgcolor": "#ffffff",
    "showcanvasborder": "0",
    "canvasborderalpha": "0"
  },
  "categories": [
    {
      "category": [
        {
          "label": "标签1"
        },
        {
          "label": "标签2"
        },
        {
          "label": "标签3"
        },
        {
          "label": "标签4"
        },
        {
          "label": "标签5"
        },
        {
          "label": "标签6"
        },
        {
          "label": "标签7"
        }
      ]
    }
  ],
  "dataset": [
    {
      "seriesname": "曲线1名称",
      "renderas": "line",
      "data": [
        {
          "value": "20",
          "yaxis": "1"
        },
        {
          "value": "30",
          "yaxis": "1"
        },
        {
          "value": "25",
          "yaxis": "1"
        },
        {
          "value": "35",
          "yaxis": "1"
        },
        {
          "value": "45",
          "yaxis": "1"
        },
        {
          "value": "50",
          "yaxis": "1"
        },
        {
          "value": "40",
          "yaxis": "1"
        }
      ]
    },
    {
      "seriesname": "曲线2名称",
      "renderas": "line",
      "data": [
        {
          "value": "100",
          "yaxis": "2"
        },
        {
          "value": "90",
          "yaxis": "2"
        },
        {
          "value": "110",
          "yaxis": "2"
        },
        {
          "value": "105",
          "yaxis": "2"
        },
        {
          "value": "120",
          "yaxis": "2"
        },
        {
          "value": "130",
          "yaxis": "2"
        },
        {
          "value": "115",
          "yaxis": "2"
        }
      ]
    }
  ],
  "yAxis": [
    {
      "title": "Y轴1名称",
      "plot":"left"
    },
    {
      "title": "Y轴2名称",
      "plot":"right"
    }
  ]
}

以上JSON对象中，设置了图表的属性和数据，同时定义了两个Y轴和两条曲线。

  1. 调用FusionCharts的构造函数并传入上一步创建的JSON对象以及用于显示图表的空间的ID。
FusionCharts.ready(function(){
  var fusioncharts = new FusionCharts({
    type: 'msline',
    renderAt: 'chart-container',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource: chartData
  });
  fusioncharts.render();
});

这样就完成了双Y轴双曲线的FusionCharts图表的创建和显示。

下面有两个完整的示例说明：

  1. 显示双Y轴双曲线的图表：
<html>
<head>
  <title>双Y轴双曲线图表示例</title>
  <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
  <script>
    FusionCharts.ready(function(){
      var chartData = {
        "chart": {
          "caption": "双Y轴曲线图表",
          "xaxisname": "X轴名称",
          "yaxisname": "Y轴1名称",
          "yAxisNameSecondary": "Y轴2名称",
          "palettecolors": "0075c2,1aaf5d",
          "showvalues": "0",
          "legendborderalpha": "0",
          "legendshadow": "0",
          "legendposition": "right",
          "showalternatehgridcolor": "1",
          "numdivlines": "5",
          "linethickness": "3",
          "basefontcolor": "#333333",
          "basefontsize": "12",
          "bgcolor": "#ffffff",
          "showcanvasborder": "0",
          "canvasborderalpha": "0"
        },
        "categories": [
          {
            "category": [
              {
                "label": "标签1"
              },
              {
                "label": "标签2"
              },
              {
                "label": "标签3"
              },
              {
                "label": "标签4"
              },
              {
                "label": "标签5"
              },
              {
                "label": "标签6"
              },
              {
                "label": "标签7"
              }
            ]
          }
        ],
        "dataset": [
          {
            "seriesname": "曲线1名称",
            "renderas": "line",
            "data": [
              {
                "value": "20",
                "yaxis": "1"
              },
              {
                "value": "30",
                "yaxis": "1"
              },
              {
                "value": "25",
                "yaxis": "1"
              },
              {
                "value": "35",
                "yaxis": "1"
              },
              {
                "value": "45",
                "yaxis": "1"
              },
              {
                "value": "50",
                "yaxis": "1"
              },
              {
                "value": "40",
                "yaxis": "1"
              }
            ]
          },
          {
            "seriesname": "曲线2名称",
            "renderas": "line",
            "data": [
              {
                "value": "100",
                "yaxis": "2"
              },
              {
                "value": "90",
                "yaxis": "2"
              },
              {
                "value": "110",
                "yaxis": "2"
              },
              {
                "value": "105",
                "yaxis": "2"
              },
              {
                "value": "120",
                "yaxis": "2"
              },
              {
                "value": "130",
                "yaxis": "2"
              },
              {
                "value": "115",
                "yaxis": "2"
              }
            ]
          }
        ],
        "yAxis": [
          {
            "title": "Y轴1名称",
            "plot":"left"
          },
          {
            "title": "Y轴2名称",
            "plot":"right"
          }
        ]
      };

      var fusioncharts = new FusionCharts({
        type: 'msline',
        renderAt: 'chart-container',
        width: '600',
        height: '400',
        dataFormat: 'json',
        dataSource: chartData
      });
      fusioncharts.render();
    });
  </script>
</head>
<body>
  <div id="chart-container"></div>
</body>
</html>
  1. 显示双Y轴双曲线的动态图表。
<html>
<head>
  <title>动态双Y轴双曲线图表示例</title>
  <script type="text/javascript" src="fusioncharts/fusioncharts.js"></script>
  <script>
    FusionCharts.ready(function(){
      var chartData = {
        "chart": {
          "caption": "双Y轴曲线动态图表",
          "xaxisname": "时间",
          "yaxisname": "数值1",
          "yAxisNameSecondary": "数值2",
          "palettecolors": "0075c2,1aaf5d",
          "showvalues": "0",
          "legendborderalpha": "0",
          "legendshadow": "0",
          "legendposition": "right",
          "showalternatehgridcolor": "1",
          "numdivlines": "5",
          "linethickness": "3",
          "basefontcolor": "#333333",
          "basefontsize": "12",
          "bgcolor": "#ffffff",
          "showcanvasborder": "0",
          "canvasborderalpha": "0"
        },
        "categories": [
          {
            "category": [
              {
                "label": "00:00"
              },
              {
                "label": "01:00"
              },
              {
                "label": "02:00"
              },
              {
                "label": "03:00"
              },
              {
                "label": "04:00"
              },
              {
                "label": "05:00"
              },
              {
                "label": "06:00"
              },
              {
                "label": "07:00"
              },
              {
                "label": "08:00"
              },
              {
                "label": "09:00"
              },
              {
                "label": "10:00"
              }
            ]
          }
        ],
        "dataset": [
          {
            "seriesname": "曲线1名称",
            "renderas": "line",
            "data": [
              {
                "value": "20",
                "yaxis": "1"
              },
              {
                "value": "30",
                "yaxis": "1"
              },
              {
                "value": "25",
                "yaxis": "1"
              },
              {
                "value": "35",
                "yaxis": "1"
              },
              {
                "value": "45",
                "yaxis": "1"
              },
              {
                "value": "50",
                "yaxis": "1"
              },
              {
                "value": "40",
                "yaxis": "1"
              },
              {
                "value": "30",
                "yaxis": "1"
              },
              {
                "value": "45",
                "yaxis": "1"
              },
              {
                "value": "50",
                "yaxis": "1"
              },
              {
                "value": "55",
                "yaxis": "1"
              }
            ]
          },
          {
            "seriesname": "曲线2名称",
            "renderas": "line",
            "data": [
              {
                "value": "100",
                "yaxis": "2"
              },
              {
                "value": "90",
                "yaxis": "2"
              },
              {
                "value": "110",
                "yaxis": "2"
              },
              {
                "value": "105",
                "yaxis": "2"
              },
              {
                "value": "120",
                "yaxis": "2"
              },
              {
                "value": "130",
                "yaxis": "2"
              },
              {
                "value": "115",
                "yaxis": "2"
              },
              {
                "value": "125",
                "yaxis": "2"
              },
              {
                "value": "135",
                "yaxis": "2"
              },
              {
                "value": "130",
                "yaxis": "2"
              },
              {
                "value": "140",
                "yaxis": "2"
              }
            ]
          }
        ],
        "yAxis": [
          {
            "title": "数值1",
            "plot":"left"
          },
          {
            "title": "数值2",
            "plot":"right"
          }
        ]
      };

      var fusioncharts = new FusionCharts({
        type: 'msline',
        renderAt: 'chart-container',
        width: '600',
        height: '400',
        dataFormat: 'json',
        dataSource: chartData
      });
      fusioncharts.render();

      setInterval(function () {
        fusioncharts.feedData('&label=11:00,' + Math.floor(Math.random() * 100) + ',' + Math.floor(Math.random() * 150));
      }, 1000);
    });
  </script>
</head>
<body>
  <div id="chart-container"></div>
</body>
</html>

以上就是“FusionCharts图表显示双Y轴双(多)曲线”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：FusionCharts图表显示双Y轴双(多)曲线 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • java 异常详解及应用实例

    Java 异常详解及应用实例 Java 是一种强类型语言，它强制要求程序员在开发过程中必须处理所有可能发生的异常。Java 提供了异常机制来处理错误并正确退出程序。在该文中，我们将详细介绍 Java 异常的使用和应用实例。 异常的概念和机制 Java 中的异常指程序在执行过程中出现的不正常情况或错误，如数组越界、除数为零等情况。当程序执行发生异常时，JVM …

    Java 2023年5月27日
    00

  • Spring Security的简单使用

    下面就是Spring Security的简单使用攻略： 什么是Spring Security Spring Security是一个功能强大且可高度定制的身份验证和访问控制框架，它为基于Spring的企业应用程序提供全面的安全性解决方案。 Spring Security的基本概念 权限（Authorities） 权限是一个用户能够执行的操作的定义。它通常用一个…

    Java 2023年5月20日
    00

  • 基于Java8实现提高Excel读写效率

    基于Java8实现提高Excel读写效率 1. 导入依赖 我们可以使用Apache POI库来读写Excel，那么我们先来看一下如何在Java中导入Apache POI库的依赖。 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi<…

    Java 2023年5月26日
    00

  • Java异或技操作给任意的文件加密原理及使用详解

    Java异或技操作给任意的文件加密原理及使用详解 异或操作和其原理 异或操作（XOR）是一种二进制运算，将两个数的对应位进行比较，不同为1，相同为0。例如，对于8位二进制数10110101和01101110进行异或操作，得到11011011。 异或操作的原理在于其对于同一个数进行两次异或操作，其值不变。即 a xor b xor b = a。因此，可以借助异…

    Java 2023年5月26日
    00

  • jsp页面中表达式语言中的$符号不起作用的解决方法

    在JSP页面中，使用表达式语言（EL）可以方便地访问JavaBean中的属性和方法，并将它们展示在页面上。表达式语言的默认前缀是${}，其中${expression}是要计算的表达式。但是有时候在EL中使用了$符号时可能出现不起作用的情况，接下来我将为您提供解决这个问题的完整攻略。 1. $符号会被JSP容器解析为结束一个JSP表达式的符号，所以需要转义 例…

    Java 2023年6月15日
    00

  • Java中关键字synchronized的使用方法详解

    下面我将详细讲解 Java 中关键字 synchronized 的使用方法。 什么是 synchronized synchronized 是 Java 中的关键字，用来保证线程安全。 在 Java 中，当多个线程访问同一资源时，如果没有对这个资源加锁，可能会发生数据不一致的情况。而使用 synchronized 关键字可以保证在同一时刻只有一个线程可以访问一…

    Java 2023年5月26日
    00

  • java打印出菱形图案实例详解

    Java 打印出菱形图案实例详解 简介 本文讲解如何在 Java 中打印出菱形图案。 思路分析 要打印出菱形图案，需要先了解菱形的形状。以一个边长为 5 的菱形为例，其形状如下： * *** ***** *** * 菱形由五行组成，分别为： 第一行：一个空格，一个星号 第二行：两个空格，三个星号 第三行：三个空格，五个星号 第四行：两个空格，三个星号 第五行…

    Java 2023年5月26日
    00

  • Spring Security动态权限的实现方法详解

    Spring Security动态权限的实现方法详解 什么是动态权限？ 在传统的企业应用中，权限被存储在静态的权限表中，着重强调的是用户拥有哪些权限。但是在现实生活中，我们会发现企业的角色是十分复杂的，拥有权限表面看起来是不够的。例如，对于一个CRM系统，管理员可能需要对某些用户进行一些特殊的操作。这种情况下，我们需要实现动态权限，即在运行时动态授权，而不是…

    Java 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部