下載Highcharts最新試用版

起點(diǎn)是評(píng)估他們?cè)趫?zhí)行各種任務(wù)時(shí)的“簡潔性”（而不是對(duì)任何語言的效率或效力做出任何判斷）。

這引出了我Rosettacode.org，這是任何編程愛好者的一個(gè)很棒的信息來源。它提供了各種任務(wù)（超過870個(gè)）和代碼片段來解決它們，在許多編程語言中（超過680個(gè)）。

探索Rosettacode.org并比較不同的編程語言。它可以幫助您找到解決您在“本土”語言中遇到的問題的新方法，并找出其他思維方式。為此，我寫了一個(gè)小應(yīng)用程序來促進(jìn)這個(gè)過程，我將在這里與大家分享。

該應(yīng)用程序，非常基本。它只是將Rosettacode.org的代碼片段長度與不同的任務(wù)和語言進(jìn)行比較，并使用我最喜歡的Javascript庫Highcharts在條形圖上顯示結(jié)果。

Python，F(xiàn)lask，Highcharts和Azure環(huán)境

Azure是微軟的云（免責(zé)聲明，我為微軟工作）。它是托管數(shù)據(jù)，創(chuàng)建機(jī)器人和自動(dòng)執(zhí)行任務(wù)，部署Python應(yīng)用程序或利用AI的絕佳基礎(chǔ)架構(gòu)。
在本演示中，我在Azure上安裝了一個(gè)python 3.4環(huán)境和一些庫（Beautiful Soup和Flask）

第1步：Scraping

第一步是刮掉RosettaCode以獲取所有可用任務(wù)。我寫了一個(gè)非常簡短的python腳本來進(jìn)行抓取。我預(yù)先選擇了一部分編程語言（見languages_dict下文），以避免刮掉太多不相關(guān)的數(shù)據(jù)。

# Selected language names and corresponding spelling/encoding as in HTML page 
languages_dict={"Java":"Java","JavaScript":"JavaScript","C":"C","C.2B.2B":"C++","C.23":"C#","COBOL":"Cobol","Haskell":"Haskell","Python":"Python","R":"R","Julia":"Julia","MATLAB_.2F_Octave":"Matlab","Pascal":"Pascal","Fortran":"Fortran","BASIC":"BASIC","Go":"Go","Ruby":"Ruby","SAS":"SAS","Stata":"Stata","Swift":"Swift","Processing":"Processing","UNIX_Shell":"UNIX Shell","VBA":"VBA","PowerShell":"PowerShell"}

#store language names in an array
language_name=[]

#populate the array from the dict
for item in languages_dict:language_name.append(languages_dict[item])

#get all tasks from Rosettacode.org
url_task="//www.rosettacode.org/wiki/Category:Programming_Tasks"
r = requests.get(url_task)
soup = BeautifulSoup(r.text, 'html.parser')
table=soup.find("div", {"class": "mw-category"})

#Create an empty dictionary to be filled with the tasks as they appear in the HTML source and name (as header)
url_dict={}

#get all links (a tags) 
tags=table('a')

#iterate over tag list and fill the task/url dictionary
for tag in tags:
    url_dict[tag.get('title',None)]=tag.get('href',None)[6:]

#store task names in an array
task_name=[]
for item in url_dict: task_name.append(item)
array_language=[]
count=[]
task=""

#flask method to get the task the user wants to compare
if request.method == "POST":
    # get url from task the user requested
    task = request.form['task']
    url="//www.rosettacode.org/wiki/"+url_dict[task]
    r = requests.get(url)
    soup = BeautifulSoup(r.text, 'html.parser')
    dict_count={}
    for language in languages_dict:
        try: 
            header=soup.find("span", {"id": language})
            snippet=BeautifulSoup(header.find_next("pre").text, 'html.parser')
            dict_count[languages_dict[language]] = len(snippet.text)
        except: 
            continue

    #sort dictionary
    for lang in sorted(dict_count, key=dict_count.get, reverse=True):
        array_language.append(lang)
        count.append(dict_count[lang])

當(dāng)用戶選擇要比較的任務(wù)時(shí)，上面的腳本查找預(yù)先選擇的語言并評(píng)估相應(yīng)片段的長度（在HTML中相應(yīng)的標(biāo)題之后的“pre”標(biāo)簽內(nèi)）。該腳本將結(jié)果存儲(chǔ)在一個(gè)數(shù)組中，該數(shù)組將通過Flask發(fā)送到前端到我的Highcharts。

以下是與“ For循環(huán) ” 對(duì)應(yīng)的片段的結(jié)果數(shù)組：

# array_language
['C', 'Swift', 'Pascal', 'Go', 'BASIC', 'Haskell', 'UNIX Shell', 'Matlab', 'Processing', 'PowerShell', 'Fortran', 'Cobol', 'VBA', 'C++', 'Java', 'Julia', 'Ruby', 'JavaScript', 'Python', 'R', 'SAS', 'Stata', 'C#']

#count (length of the snippets)
[90, 73, 144, 167, 70, 115, 400, 103, 103, 116, 1211, 533, 193, 104, 119, 71, 55, 114, 92, 85, 293, 79, 261]

然后這些數(shù)組將提供條形圖。

第2步：Highcharts

Python和Flask使用和將數(shù)據(jù)數(shù)組發(fā)送到Highcharts 。在HTML頁面呈現(xiàn)期間，服務(wù)器注入使用python構(gòu)造的數(shù)組。請(qǐng)注意，我使用該選項(xiàng)來避免任何編碼意外。{{ array_language | safe}}{{count}}| safe

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Programming language comparison: {{task | safe}} '
    },
    subtitle: {
        text: 'Source: rosettacode.org'
    },
    xAxis: {
        categories: {{ array_language   | safe}},
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Task size (char)',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: 'chars'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: '{{task}}',
        data: {{count}}
    }]
});

結(jié)果

• 下面是該應(yīng)用程序的屏幕截圖。
• 以下是Azure上托管的Python腳本和HTML頁面。

我們現(xiàn)在有一種交互方式來比較執(zhí)行許多任務(wù)所需的代碼長度！要添加到圖表中的一個(gè)很好的功能是將代碼段顯示為每種語言的工具提示。這將增強(qiáng)我們對(duì)Rosettacode的視覺探索。

購買Highcharts正版授權(quán)，請(qǐng)點(diǎn)擊“”喲！