营销型网站_专注网站建设和网站模板设计制作
网络技术知识

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

  • 营销型网站
  • 2023-11-29 09:46:46

要讲解“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. 创建一个用于显示图表的空间。
<p id="chart-container"></p>
  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",
    "numplines": "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",
          "numplines": "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>
  <p id="chart-container"></p>
</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",
          "numplines": "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>
  <p id="chart-container"></p>
</body>
</html>

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

营销型网站
https://www.yxxwz.net

【营销型网站】致力于让传统行业中小企业网络营销真正的落地！营销型网站超市提供营销型网站建设，营销型网站模板制作，营销型网站模板免费下载以及营销型网站运营和网站推广优化等相关知识。

相关文章