FusionCharts: Verschönerung der Säulendiagramme

Im vorherigen Beitrag habe ich angehalten Erstellen des Säulendiagramms verwenden FusionCharts Bibliothek. In diesem Beitrag zeige ich Ihnen, wie Sie das Diagramm verschönern, indem Sie sein Erscheinungsbild ändern, nämlich Hintergrund, Rahmen, Leinwandhintergrund, Leinwandrand und Erscheinungsbild des Datenplots. Wenn Sie direkt zu diesem Beitrag gelangen, würde ich Ihnen empfehlen, diesen Beitrag zu lesen, um die Daten für das Diagramm einzurichten und auch die Basisversion des Diagramms anzuzeigen.

lesen Sie auch:

  • Verwenden der JavaFX Chart API zum Hinzufügen von Diagrammen zu Swing-Anwendungen
  • Kreisdiagramme mit DOJO
  • PrimeFaces-Diagramme – Beispiel für Kreisdiagramm + Ajax-Verhaltensereignisse

In diesem Beitrag zeige ich Ihnen, wie Sie:

  • Ändern Sie den Hintergrund und den Rand des Diagramms.
  • Ändern Sie den Hintergrund und den Rand der Leinwand des Diagramms.
  • Ändern Sie den Hintergrund und den Rand des Datendiagramms.
  • Ich werde drei Schaltflächen erstellen, um jede der oben genannten drei Aufgaben auszuführen. Zu diesem Zweck habe ich die Datei „column_chart_sample.html“ wie folgt aktualisiert:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Sample for Column Chart using FusionChart</title>
      <link rel="stylesheet" href="css/bootstrap.css"/>
    </head>
    <body>
      <div  >
        <div  >
          <div  >
            <h3>Top 10 run scorers in ODI cricket in the year 2015</h3>
            <!-- Container for rendering the chart -->
            <div id="chart-container"></div>
          </div>
        </div>
        <!-- Buttons for changing the appearance of the chart -->
        <div  >
          <div>
            <button type="button" id="chartBorderBtn"  >
              Change chart border
            </button>
          </div>
          <div>
            <button type="button" id="chartBackgroundBtn"  >
              Change chart background
            </button>
          </div>
        </div>
        <br/>
        <div  >
          <div>
            <button type="button" id="canvasBorderBtn"  >
              Change canvas border
            </button>
          </div>
          <div>
            <button type="button" id="canvasBackgroundBtn"  >
              Change canvas background
            </button>
          </div>
        </div>
        <br/>
        <div  >
          <div>
            <button type="button" id="dataPlotBorderBtn"  >
              Change data plot border
            </button>
          </div>
          <div>
            <button type="button" id="dataPlotBackgroundBtn"  >
              Change data plot background
            </button>
          </div>
        </div>
      </div>
      <!-- jQuery Javascript -->
      <script src="js/jquery-2.1.4.js"></script>
    
      <script src="js/bootstrap.js"></script>
      <!-- FusionCharts related Javascript library -->
      <script src="js/fusioncharts.js"></script>
      <script src="js/fusioncharts.charts.js"></script>
      <script src="js/fusioncharts.theme.zune.js"></script>
      <script src="js/column_chart_sample.js"></script>
    </body>
    </html>
    

    Der oben hervorgehobene Code ist die neue Ergänzung. Das Laden der aktualisierten HTML-Ergebnisse wird in der Anzeige wie unten gezeigt angezeigt:
    FusionChart ColumnChart 1Auch der Javascript-Code muss aktualisiert werden, um die Handler für die neuen Schaltflächen zu berücksichtigen. Der aktualisierte Code für columns_chart_sample.js sieht wie folgt aus:

    var chartData;
    $(function(){
      $("#chartBorderBtn").click(function(){
        changeChartBorder();
      });
    
      $("#chartBackgroundBtn").click(function(){
        changeChartBackground();
      });
    
      $("#canvasBorderBtn").click(function(){
        changeCanvasBorder();
      });
    
      $("#canvasBackgroundBtn").click(function(){
        changeCanvasBackground();
      });
    
      $("#dataPlotBorderBtn").click(function(){
        changeDataPlotBorder();
      });
    
      $("#dataPlotBackgroundBtn").click(function(){
        changeDataPlotBackground();
      });
    
      $.ajax({
    
        url: 'http://localhost:3300/scores',
        type: 'GET',
        crossDomain: true,
        success : function(data) {
          chartData = data;
          var chartProperties = {
            "caption": "Top 10 run scorers in ODI Cricket in 2015",
            "xAxisName": "Player",
            "yAxisName": "Runs Scored",
            "rotatevalues": "1",
            "theme": "zune"
          };
    
          var apiChart = new FusionCharts({
            type: 'column2d',
            renderAt: 'chart-container',
            width: '550',
            height: '350',
            dataFormat: 'json',
            dataSource: {
              "chart": chartProperties,
              "data": chartData
            }
          });
          apiChart.render();
        }
      });
    });
    
    function changeChartBorder(){}
    function changeChartBackground(){}
    function changeCanvasBorder(){}
    function changeCanvasBackground(){}
    function changeDataPlotBorder(){}
    function changeDataPlotBackground(){}
    

    Im obigen Javascript-Code wurde der aktualisierte Code hervorgehoben.

    Im Rest des Beitrags werde ich den Code für die 6 Button-Handler schreiben und Ihnen dabei zeigen, wie Sie die verschiedenen Diagrammeigenschaften nutzen können.

    Den Diagrammrand ändern

    FusionCharts API stellt eine API bereit setChartAttribute um die Diagrammeigenschaften zu ändern. Die API akzeptiert entweder zwei Parameter, dh den Eigenschaftsnamen und seinen Wert, ODER einen Parameter, der das JSON-Objekt der Diagrammeigenschaften ist. Ich würde den letzteren Ansatz zum Erstellen des JSON-Objekts von Eigenschaften verwenden. Unten ist das JSON-Objekt der Eigenschaften:

    var borderProperties = {
      //whether to show the border or not.
      "showBorder":1,
      //color of the border
      "borderColor":"#000000",
      //thickness of the border
      "borderThickness":3,
      //opacity of the border
      "borderAlpha":90
    }
    

    Die vollständige Umsetzung der changeChartBorder Die Methode ist unten dargestellt:

    function changeChartBorder(){
      var borderProperties = {
        //whether to show the border or not.
        "showBorder":1,
        //color of the border
        "borderColor":"#000000",
        //thickness of the border
        "borderThickness":3,
        //opacity of the border
        "borderAlpha":90
      }
      apiChart.setChartAttribute(borderProperties);
    }
    

    Laden wir die Seite erneut und klicken Sie auf die Schaltfläche „Diagrammrand ändern“, um die folgenden Änderungen anzuzeigen:
    FusionChart ColumnChart 2

    Diagrammhintergrund ändern

    Um den Diagrammhintergrund zu füllen, können wir eine einzelne Farbe, einen Farbverlauf und ein Bild verwenden. Zur Veranschaulichung würde ich eine Verlaufsfüllung verwenden. Eine Farbverlaufsfüllung würde mehr als eine Farbe und das Verhältnis des Beitrags jeder Farbe zum Füllen des Hintergrunds erfordern. Das Eigenschaften-JSON-Objekt des Diagrammhintergrunds würde wie folgt aussehen:

    var backgroundProperties = {
      //colors to be used for chart background
      "bgColor":"EEEEEE,CCCCCC",
      //transperancy of each color
      "bgAlpha" : "70,80",
      //contribution of each color to the gradient of the background
      "bgRatio":"60, 40",
      //setting the canvas area as transperant
      "canvasBgAlpha":0
    };
    

    Die vollständige Umsetzung von changeChartBackground ist unten dargestellt:

    function changeChartBackground(){
      var backgroundProperties = {
        //colors to be used for chart background
        "bgColor":"EEEEEE,CCCCCC",
        //transperancy of each color
        "bgAlpha" : "70,80",
        //contribution of each color to the gradient of the background
        "bgRatio":"60, 40",
        //setting the canvas area as transperant
        "canvasBgAlpha":0
      };
      apiChart.setChartAttribute(backgroundProperties);
    }
    

    Laden wir die Seite neu und klicken Sie auf die Schaltfläche „Diagrammhintergrund ändern“, um die Änderungen anzuzeigen. Das Diagramm sieht nach dem Anwenden des Diagrammhintergrunds wie folgt aus:
    FusionChart ColumnChart 3

    Leinwandrand ändern

    Canvas ist der Bereich des Diagramms, der die x-Achse und die y-Achse enthält und sich zwischen den Achsen befindet. Das Folgende ist das JSON-Objekt für die Canvas-Randeigenschaften:

    var canvasBorderProperties = {
      //showing canvas border or not
      "showCanvasBorder" : 1,
      //border of the canvas
      "canvasBorderColor" : "#666666",
      //thickness of the canvas border
      "canvasBorderThickness": 3,
      //opacity of the canvas background
      "canvasBorderAlpha":80
    };
    

    Die Implementierung von changeCanvasBorder() Die Methode ist unten angegeben:

    function changeCanvasBorder(){
      var canvasBorderProperties = {
        //showing canvas border or not
        "showCanvasBorder" : 1,
        //border of the canvas
        "canvasBorderColor" : "#666666",
        //thickness of the canvas border
        "canvasBorderThickness": 3,
        //opacity of the canvas background
        "canvasBorderAlpha":80
      };
      apiChart.setChartAttribute(canvasBorderProperties);
    }
    

    Das Diagramm sieht nach dem Anbringen des Leinwandrandes wie folgt aus:
    FusionChart ColumnChart 4

    Ändern des Leinwandhintergrunds

    Das folgende JSON-Objekt stellt die Eigenschaften zum Ändern des Canvas-Hintergrunds dar:

    var canvasBackgroundProperties = {
      //background color for the canvas
      "canvasBgColor":"#1790e1",
      //opacity of the background color
      "canvasBgAlpha" : 30
    };
    

    In diesem Fall verwende ich keinen Farbverlauf, um die Leinwand zu füllen, sondern verwende stattdessen eine einzelne Farbe. Die Umsetzung der changeCanvasBackground Die Methode ist unten dargestellt:

    function changeCanvasBackground(){
      var canvasBackgroundProperties = {
        //background color for the canvas
        "canvasBgColor":"#1790e1",
        //opacity of the background color
        "canvasBgAlpha" : 30
      };
      apiChart.setChartAttribute(canvasBackgroundProperties);
    }
    

    Das Diagramm sieht nach dem Anwenden des Leinwandhintergrunds wie folgt aus:
    FusionChart ColumnChart 5

    Ändern des Datenplotrandes

    Datenplot ist der Bereich, der die Daten auf der Leinwand darstellt. Bei einem Säulendiagramm handelt es sich um die Spalten, bei einem Liniendiagramm um die Linien, bei einem Kreisdiagramm um den Kreis und so weiter. Wir können sowohl den Rand als auch den Hintergrund konfigurieren. Die folgenden Eigenschaften dienen der Konfiguration des Rahmens:

    var dataPlotBorderProperties(){
      //whether to show the border for data plot
      "showPlotBorder" : 1,
      //whether the data plot border is dashed or not
      "plotBorderDashed":1,
      //length of the dash in the data plot border
      "plotBorderDashLen": 5,
      //gap between the dash in the data plot border
      "plotBorderDashGap": 5
    };
    

    Die Umsetzung der changeDataPlotBorder() Die Methode ist unten dargestellt:

    function changeDataPlotBorder(){
      var dataPlotBorderProperties(){
        //whether to show the border for data plot
        "showPlotBorder" : 1,
        //whether the data plot border is dashed or not
        "plotBorderDashed":1,
        //length of the dash in the data plot border
        "plotBorderDashLen": 5,
        //gap between the dash in the data plot border
        "plotBorderDashGap": 5
      };
      apiChart.setChartAttribute(dataPlotBorderProperties);
    }
    

    Das Diagramm mit dem Datenplotrahmen sieht wie folgt aus:
    FusionChart ColumnChart 6

    Ändern des Hintergrunds der Datendarstellung

    Das JSON-Objekt für Hintergrundeigenschaften des Datenplots ist unten angegeben:

    var dataPlotBackgroundProperties = {
      //list of colors to be applied to the columns in the data plot
      "paletteColors" : "#EED17F,#2d3c45,#074868,#B0D67A,#2C560A,#DD9D82",
      //setting the transperancy of the data plots
      "plotFillAlpha" : 90
    };
    

    Man kann sogar Farbverläufe innerhalb des Datendiagramms füllen, aber um es einfach zu halten und den Ansatz zu veranschaulichen, werde ich es mit verschiedenen Farben füllen. Die Umsetzung der changeDataPlotBackground() Die Methode ist unten dargestellt:

    function changeDataPlotBackground(){
      var dataPlotBackgroundProperties = {
        //list of colors to be applied to the columns in the data plot
        "paletteColors" : "#EED17F,#2d3c45,#074868,#B0D67A,#2C560A,#DD9D82",
        //setting the transperancy of the data plots
        "plotFillAlpha" : 90
      };
      apiChart.setChartAttribute(dataPlotBackgroundProperties);
    }
    

    Das Diagramm mit dem Hintergrund der Datendarstellung sieht wie folgt aus:
    FusionChart ColumnChart 7

    In den obigen Beispielen habe ich einige Eigenschaften belassen, um den Artikel einfach zu halten und dennoch den Ansatz zum Anwenden verschiedener Eigenschaften zu vermitteln. So zeigen Sie alle verfügbaren Eigenschaften an:

    • Für den Diagrammrand und -hintergrund klicken Sie auf Hier.
    • Klicken Sie für die Leinwand auf Hier.
    • Klicken Sie für die Datendarstellung auf Hier.

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

    Nach oben scrollen