JavaScript图表工具FusionCharts Suite XT入门教程(十一):使用Plain JS应用不同的主题

翻译|使用教程|编辑:吴园园|2019-11-04 16:16:22.640|阅读 39 次

概述:FusionCharts Suite随附了预定义的主题,您可以使用这些主题来设置图表的外观或行为。

相关链接:

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案,目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

JavaScript图表工具,为什么选择FusionCharts?点击了解!

点击下载FusionCharts Suite XT最新试用版

使用Plain JS应用不同的主题

在FusionCharts Suite XT中,您可以在相应的JSON / XML文件中为每个图表手动设置外观和功能属性。如果您仅处理少量图表,则可以使用此功能。随着图表数量的增加,您的麻烦也随之增加。FusionCharts Suite随附了预定义的主题,您可以使用这些主题来设置图表的外观或行为。

FusionCharts Suite XT随附以下预定义主题:

  • fusion (自v3.13.0起)

  • gammel (自v3.13.0起)

  • candy (自v3.13.0起)

  • zune

  • ocean

  • carbon

本文重点介绍如何在运行时将不同的主题应用于图表。单击任何单选按钮,以查看图表的外观和样式随每个主题的变化。

配置为更改主题的图表如下所示:

JavaScript图表工具FusionCharts Suite XT入门教程(十一):使用Plain JS应用不同的主题

上面示例的完整代码如下:

import FusionCharts from "fusioncharts";import Charts from "fusioncharts/fusioncharts.charts";import FusionTheme from "fusioncharts/themes/fusioncharts.theme.fusion";// Add the chart and theme as dependencyFusionCharts.addDep(Charts);FusionCharts.addDep(FusionTheme);// Create an Instance with chart optionsvar chartInstance = new FusionCharts({
  type: "column2d",
  height: "400",
  width: "700",
  dataFormat: "json",
  renderAt: "chart-container",
  dataSource: {
    chart: {
      caption: "Countries With Most Oil Reserves [2017-18]",
      subCaption: "In MMbbl = One Million barrels",
      xAxisName: "Country",
      yAxisName: "Reserves (MMbbl)",
      numberSuffix: "K",
      theme: "fusion"
    },
    data: [
      {
        label: "Venezuela",
        value: "290"
      },
      {
        label: "Saudi",
        value: "260"
      },
      {
        label: "Canada",
        value: "180"
      },
      {
        label: "Iran",
        value: "140"
      },
      {
        label: "Russia",
        value: "115"
      },
      {
        label: "UAE",
        value: "100"
      },
      {
        label: "US",
        value: "30"
      },
      {
        label: "China",
        value: "30"
      }
    ]
  },
  events: {
    beforeRender: function(e, d) {
      var container = e.data.container;
      // Change the sizes according to your need
      var options = {
        fusion: "fusion",
        gammel: "gammel",
        candy: "candy",
        zune: "zune",
        ocean: "ocean",
        carbon: "carbon"
      };
      var themeSelected = "fusion";
      function instantiate() {
        // Create option containers
        var parent = container.parentNode;
        var optionsContainer = document.createElement("div");
        optionsContainer.id = "config-container";
        var spanLabel = document.createElement("span");
        spanLabel.id = "select-text";
        spanLabel.innerText = "Choose a theme: ";
        var radioContainer = document.createElement("div");
        addClass(radioContainer, "change-type");
        window.__onThemeChange = function(option) {
          e.sender.setChartAttribute("theme", option);
        };
        // Util to add class
        function addClass(element, className) {
          var element,
            name = className,
            arr;
          arr = element.className.split(" ");
          if (arr.indexOf(name) == -1) {
            element.className += " " + name;
          }
        }
        function radioWrapper(
          wrapperId,
          inputId,
          label,
          selected,
          optionLabel
        ) {
          var item = "<div id='" + wrapperId + "' >";
          item +=
            "<input name='dimesion-selector' id='" +
            inputId +
            "' type='radio' " +
            (selected ? "checked='checked'" : "") +
            " onchange='__onThemeChange(\"" +
            optionLabel +
            "\")'/>";
          item += "<label for='" + inputId + "' >" + label + "</label>";
          item += "</div>";
          return item;
        }
        var changeTypeChilds = "";
        Object.keys(options).forEach(function(option, index) {
          var label = options[option];
          var selected = themeSelected === option;
          var radioOption = radioWrapper(
            "radio" + (index + 1),
            "radioButton" + (index + 1),
            label.toUpperCase(),
            selected,
            option
          );
          changeTypeChilds += radioOption;
        });
        radioContainer.innerHTML = changeTypeChilds;
        optionsContainer.appendChild(spanLabel);
        optionsContainer.appendChild(radioContainer);
        parent.appendChild(optionsContainer);
        var css =
          '.change-type{display:inline-block;margin:0 10px;font-family:basefontRegular,Helvetica Neue,Arial,sans-serif}.change-type>div{display:inline-flex;position:relative;margin:0 10px}.change-type label{position:relative;padding:5px 4px 5px 30px;border-radius:4px}.change-type input{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;left:0;position:absolute}.change-type label:after,.change-type label:before{content:"";position:absolute}.change-type label:before{display:block;background:#fff;border:2px solid #949697;box-shadow:none;border-radius:50%;top: 15px;left: 9px;width:1rem;height:1rem}.change-type label:after{    width: .55rem;height: .55rem;top: 18px;left: 11px;border-radius: 100%;}.change-type input:checked~label{color:#48b884;font-weight:600;box-shadow:0 4px 9px 0 rgba(104,105,128,.22)}.change-type input:checked~label:before{color:#fff;box-shadow:none;border:2px solid #48b884}.change-type input:checked~label:after{background:#55bd8d}';
        var styleNode = document.createElement("style");
        styleNode.innerHTML = css;
        document.body.appendChild(styleNode);
      }
      if (!window.__sample_theme_change) {
        instantiate();
      }
      window.__sample_theme_change = true;
    }
  }}); // RenderchartInstance.render();

上图通过以下步骤呈现:

1、使用包括必要的库和组件import。例如fusioncharts图书馆等

2、将图表和主题添加为依赖项。

3、将图表配置存储在JSON对象中。在JSON对象中:

  • 将图表类型设置为column2d。

  • 设置图表的宽度和高度(以像素为单位)。

  • 将设置dataFormat为JSON。

  • 将json数据嵌入为的值dataSource。

4、beforeRender调用event将主题从更新fusion为任何其他主题。

5、在中创建了单选按钮,<div>以从中选择主题:

  • fusion

  • gammel

  • candy

  • zune

  • ocean

  • carbon

6、功能已添加到单选按钮,以在运行时更新主题。

====================================================

想了解更多关于FusionCharts Suite XT资源,请点击此处

想要了解或者购买FusionCharts Suite XT正版授权的朋友欢迎咨询慧都官方客服

关注下方微信公众号,及时获取产品最新消息和最新资讯

JavaScript图表工具FusionCharts Suite XT入门教程(十一):使用Plain JS应用不同的主题



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/apply-different-themes-using-plain-javascript

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat