JavaScript圖表工具FusionCharts Suite XT入門教程（十一）：使用Plain JS應(yīng)用不同的主題

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來制作專業(yè)的JavaScript圖表。

JavaScript圖表工具，為什么選擇FusionCharts？點擊了解！

點擊下載FusionCharts Suite XT最新試用版

使用Plain JS應(yīng)用不同的主題

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();

上圖通過以下步驟呈現(xiàn)：

1、使用包括必要的庫和組件import。例如fusioncharts圖書館等

2、將圖表和主題添加為依賴項。

3、將圖表配置存儲在JSON對象中。在JSON對象中：

• 將圖表類型設(shè)置為column2d。
  

• 設(shè)置圖表的寬度和高度（以像素為單位）。
  

• 將設(shè)置dataFormat為JSON。
  

• 將json數(shù)據(jù)嵌入為的值dataSource。

4、beforeRender調(diào)用event將主題從更新fusion為任何其他主題。

5、在中創(chuàng)建了單選按鈕，<div>以從中選擇主題：

• fusion
  

• gammel
  

• candy
  

• zune
  

• ocean
  

• carbon

6、功能已添加到單選按鈕，以在運行時更新主題。

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

想了解更多關(guān)于FusionCharts Suite XT資源，請點擊此處

想要了解或者購買FusionCharts Suite XT正版授權(quán)的朋友歡迎

關(guān)注下方微信公眾號，及時獲取產(chǎn)品最新消息和最新資訊