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

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应用不同的主题

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正版授权的朋友欢迎

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