Fusioncharts ---多折線圖，多柱形圖(2D)

阿新 • • 發佈：2019-02-12

1,使用到這個外掛的情況是，做報表。很突然的情況，要給某個公司做報表，看見專案中前輩使用的是fusioncharts這個外掛，於是也就接著使用了。本次展示多折線圖，和多柱形圖(2D)。

2，圖表的實現包括3個部分

a)資料庫對資料進行查詢拼裝
b)控制層將資料拼裝成xml格式(或者json，我是採用的xml格式)
c)頁面進行圖形的選擇和設定

3，直接上程式碼了。

a.首先看我的資料庫部分

這裡寫圖片描述

b.在看我的控制層程式碼

@RequestMapping("createNewUserChart")
public ModelAndView createNewUserChart(){
    String 
 dataXml = "<graph startingAngle='70' bgColor='99CCFF' decimals='0' bgRatio='0,100' "
                + "bgAngle='360' enableRotation='0' xAxisName ='處理人' yAxisName='系統工單' numberprefix='' snumbersuffix='%25' "
                + " enableSmartLabels='1' caption='人員-系統工單一統計圖表' showBorder='0' bgAlpha='40,100' >" 
;
        List<Map<String, Object>> list = chartService.getNewUserChar();
        String categories = "<categories>";//x軸的資料
        //y軸的資料
        String dataset1 = "<dataset seriesName='測試1' >";
        String dataset2 = "<dataset seriesName='測試2' >";
        String dataset3 = 
 "<dataset seriesName='測試3' >";
        String dataset4 = "<dataset seriesName='測試4' >";
        for (Map<String, Object> map : list) {
            categories += "<category label='" + map.get("COUNT0") + "' />";
            dataset1 += "<set value='" + map.get("COUNT1") + "' />";
            dataset2 += "<set value='" + map.get("COUNT2") + "' />";
            dataset3 += "<set value='" + map.get("COUNT3") + "' />";
            dataset4 += "<set value='" + map.get("COUNT4") + "' />";
        }
        categories += "</categories>";
        dataset1 += "</dataset>";
        dataset2 += "</dataset>";
        dataset3 += "</dataset>";
        dataset4 += "</dataset>";
        dataXml += categories + dataset1 + dataset2 + dataset3 + dataset4;
        dataXml += "</graph>";
        ModelMap model = new ModelMap();
        model.put("dataXml", dataXml);
    return new ModelAndView("jsp的url",model);
    }
至於表格頭部資料的引數設定，就去檢視api吧。

c.頁面展示部分

<script>
    $(document).ready(function() {
        createCharts();
    });
    //圖表生成方法
    createCharts = function() {
        var dataXml = "${dataXml}";
        chart1 = new FusionCharts(
                "resources/framework/script/fusioncharts/swf/MSLine.swf",
                "chart1Id", "100%", "100%");//折線圖
 "resources/framework/script/fusioncharts/swf/MSColumn2D.swf","chart1Id", "100%", "100%");//柱形圖（兩個圖展示只能選一個）
        chart1.setDataXML(dataXml);
        chart1.render("chart1div");
    }
</script>
    <body>
        <div id="chart1div" align="center"></div>
    </body>

d.外掛儲存的位置

這裡寫圖片描述

e.結果展示

    a.折線圖

這裡寫圖片描述
b.柱形圖

4.我是大概的寫了個demo，這裡面圖表的型別還有很多，今後碰到了新的圖表在補充。

echarts中國地圖上顯示柱狀圖，並且柱狀圖可點選

先放效果圖~~點選之後~~（資料和標題可動態變化）話不多說，直接上程式碼<link rel="shortcut icon" href="${ctx}/static/img/favicon.ico"> <link rel="stylesheet" href="

Fusioncharts ---多折線圖，多柱形圖(2D)

1,使用到這個外掛的情況是，做報表。很突然的情況，要給某個公司做報表，看見專案中前輩使用的是fusioncharts這個外掛，於是也就接著使用了。本次展示多折線圖，和多柱形圖(2D)。 2，圖表的實現包括3個部分 a)資料庫對資料進行查詢拼裝 b)控制層

Echart--多個柱形圖

http cat center itemstyle pre img tip item idt 設置數據: 效果圖: optionAll: { title: { text: ‘營收情況‘, left: ‘

.Net Excel 匯出圖表Demo(柱狀圖，多標籤頁)

1 使用外掛名稱Epplus，多個Sheet頁資料應用，Demo為柱狀圖（Epplus支援多種圖表） 2 Epplus 的安裝和引用新建一個工程檔案或控制檯應用程式開啟 Vs2017 Tools 的Nuget&nbs

32、python繪製柱形圖、單個、多個、堆積、雙向柱形圖

目錄一、繪圖函式二、案例第一、單個柱形圖第二個、多個柱形圖第三、堆積柱形圖第四、雙向柱形圖柱形圖：一種長方形的單位長度，根據資料大小回繪製的統計圖，用來比較兩個或以上的資料（時間或類別）一、繪圖函式 bar（left，right，

echart柱形圖-一條柱子顯示多個數據

personCountOption = { backgroundColor:'#fff', tooltip: { trigger: 'item', axisPointer: {

【前端統計圖】echarts多條折線圖和橫柱狀圖實現

圖片.png 程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

winform chart畫折線，波形圖，多條資料

結果圖程式碼過程： Form介面佈局，控制元件：2個RadioButton, 3個button,1個chart，1個timer控制元件程式碼區：Form1.cs using System; using System.Collections.Generi

echart動態載入多個柱形圖

前臺 service層 @Service("hosdeptStatusService") @Transactional public class HosdeptServiceImpl implements HosdeptStatusService { @Auto

java實現各種資料統計圖（柱形圖，餅圖，折線圖）

最近在做資料探勘的課程設計，需要將資料分析的結果很直觀的展現給使用者，這就要用到資料統計圖，要實現這個功能就需要幾個第三方包了： 1. jfreechart-1.0.13.jar 2. jcommon-1.0.16.jar 3. gnuj

柱形圖，餅狀圖JavaScript

column 註意文件 label max number span item pointf <script type="text/javascript"> $(function () { $(‘#container_2‘).highcharts({

【Python3爬蟲-爬圖片】多執行緒爬取中國國家地理全站美圖，多圖可以提高你的審美哦

宣告：爬蟲為學習使用，請各位同學務必不要對當放網站或i伺服器造成傷害。務必不要寫死迴圈。 - 思路：古鎮——古鎮列表（迴圈獲取古鎮詳情href）——xx古鎮詳情（獲取所有img的src） - 1. 單分類爬： from bs4 import BeautifulSo

bar-上下漸變色柱形圖，提示資訊自定義顯示

var x_data1 = ['0', '1', '2', '3', '4', '5', '6']; // 橫座標 var jstr = [5, 6, 40, 100, 58, 99]; //進場資料 var cstr = [36, 11, 22, 69, 115, 196]; //出場資

bar-漸變色柱形圖，tooltip小標籤顯示漸變顏色

var legendData = ['A', 'B', 'C', 'D']; var xData = ['1', '2', '3', '4', '5']; var data1 = [10, 20, 30, 40, 50]; var data2 = [11, 21, 31, 41, 51];

Highcharts 雙Y軸, 柱形圖，線條圖組合

一程式碼 <html> <head> <meta charset="UTF-8" /> <title>Highcharts 雙Y軸, 柱形圖，線條圖組合</title> <script src="http://ap

Highcharts 柱形圖，線條圖，餅圖組合

一程式碼 <html> <head> <meta charset="UTF-8" /> <title>Highcharts 柱形圖，線條圖，餅圖組合</title> <script src="http://apps

echarts，type：bar 柱形圖的行高和寬度（條間距離）設定

type：bar 柱形圖的行高和寬度（條間距離）設定百度圖表柱形圖的bar之間的行高？好像在文件沒找到對應屬性，只有barGap和barCategoryGap，但單獨設定這兩個一般還達不到我們想要的

Echarts-柱形圖與折線圖混合顯示

背景：想讓折線圖跟柱形圖混合顯示，當然其實利用echarts的圖形切換功能，可以很容易的實現，比如下邊的這個程式碼 toolbox: { top:0, feature: { //點選圖表可直接將柱形圖與折線圖進行切換

echarts柱形圖x軸顯示不全，每隔一個不顯示的問題

問題原因可能：x軸資料間隔太小；問題解決：1、調整間隔屬性修改 &nbs

Echarts雙Y軸折線圖和柱形圖混合

柱形圖和折線圖混合使用，並且使用雙y軸座標具體程式碼如下 option ={ color: ['#009CFF', '#FF072F'], //設定多個顏色值時代表的是圖例顏色 tooltip: { trigger

Fusioncharts ---多折線圖，多柱形圖(2D)

相關推薦