javascript 图表_我如何使用JavaScript数据透视表和图表库分析开发人员趋势

javascript 图表

Hi, dev community!

嗨，开发者社区！

Today I’d like to share my experience of analyzing developers’ preferences based on StackOverflow’s Developer Survey Results. Of course, there are plenty of ready analytical reports but it’s always much more exciting to create a personal project from scratch and improve our skills of data analysis. And that’s exactly what I’m going to do. :)

今天，我想分享一下我根据StackOverflow的“开发者调查结果 ”分析开发者的偏好的经验。 当然，有很多现成的分析报告，但是从头开始创建个人项目并提高我们的数据分析技能总是更加令人兴奋。 而这正是我要做的。 :)

挑战性 (Challenges)

Right from the start, I faced a challenge of finding a tool that could handle the processing of 100k text records. Since it’s an enormous dataset, the tool needs to be powerful and use as little of browser memory as possible. It should be simple-to-use at the same time. Luckily, I found a web pivot table component. It looked promising at first sight and helped me accomplish all my intentions related to reporting.

从一开始，我就面临着寻找可处理10万条文本记录的工具的挑战。 由于它是一个庞大的数据集，因此该工具必须功能强大且使用尽可能少的浏览器内存。 同时应该易于使用。 幸运的是，我找到了一个Web数据透视表组件。 乍一看，它看起来很有希望，并帮助我完成了与报告有关的所有意图。

Beyond its reporting capabilities, I noticed that it supported integration with charting libraries. I chose FusionCharts. It also integrates with different JavaScript frameworks and provides sophisticated charts. Using a combination of a pivot table and chart, I managed to create a tiny pet project on data analysis and visualization.

除了报告功能之外，我还注意到它支持与图表库的集成。 我选择了FusionCharts。 它还与不同JavaScript框架集成，并提供复杂的图表。 通过结合数据透视表和图表，我设法创建了一个有关数据分析和可视化的小型宠物项目。

目的与目标 (Goals & objectives)

My analytical purposes included creating a report and visualizing the survey results. I decided to focus on developers’ profiles, their employment statuses, the most loved technologies, languages, frameworks, and libraries and unite this information to gain new insights.

我的分析目的包括创建报告并使调查结果可视化 。 我决定专注于开发者的个人资料，他们的就业状况，最受欢迎的技术，语言，框架和库，并将这些信息结合起来以获得新的见解。

For example, it was interesting for me to discover the backgrounds of developers who love specific technologies. As the next step forward, I’d like to analyze relationships between choosing different technologies.

例如，发现喜欢特定技术的开发人员的背景对我来说很有趣。 作为下一步，我想分析选择不同技术之间的关系。

This article will be in the form of a step-by-step tutorial where I’ll try to cover the most important aspects of working with both tools.

本文将采用分步教程的形式，在其中我将尝试介绍使用这两种工具的最重要方面。

I’m excited to share with you the process of creating an interactive dashboard featured with drill-through, drag-and-drop and charting functionality.

很高兴与您分享创建具有追溯，拖放和图表功能的交互式仪表板的过程。

Let’s start!

开始吧！

将库安装到项目中 (Install the libraries into your project)

As a first step, you need to add the library scripts, Flexmonster connector for FusionCharts, and containers where the components will be rendered.

第一步，您需要添加库脚本，FusionCharts的Flexmonster连接器以及将要渲染组件的容器。

If you want to create multiple charts, add more containers for them.

如果要创建多个图表，请为其添加更多容器。

集成数据透视表 (Integrate a pivot table)

Add a reporting tool to your project and set its basic configuration:

将报告工具添加到项目中并设置其基本配置：

var pivot = new Flexmonster({
    container: "pivotContainer",
    toolbar: true
});

To find out how to extend the possibilities of the pivot table with various properties, you can check the article about init API call.

要了解如何扩展具有各种属性的数据透视表的可能性，可以查看有关init API call的文章。

准备并导入数据 (Prepare and import the data)

As a dataset, I’ve chosen the Developer’s Survey Results. It contains 195 MB of raw text data.

作为数据集，我选择了开发人员的调查结果。 它包含195 MB的原始文本数据。

One way to load the data into a pivot table is by defining the function that returns JSON data. But as I can’t show the whole data in a CodePen demo due to its limitations on code size. So as not to clutter my code, I’ve loaded a file on CDN and set a path to my data source:

将数据加载到数据透视表中的一种方法是定义返回JSON数据的函数。 但是由于代码大小的限制，我无法在CodePen演示中显示全部数据。 为了不使我的代码混乱，我在CDN上加载了一个文件，并设置了我的数据源的路径：

dataSource: {
    filename: "surveyresults.csv"
}

设置切片 (Set a slice)

Arrange the hierarchies on the grid — put them into rows, columns, and measures. Also, you can add report filters to keep your grid neat and sort the data to see the most relevant records first.

在网格上排列层次结构-将它们放入行，列和度量中。 另外，您可以添加报告过滤器以保持网格整洁，并对数据进行排序以首先查看最相关的记录。

"slice": {
    "reportFilters": [{
            "uniqueName": "Country"
        },
        {
            "uniqueName": "Gender"
        }
    ],
    "rows": [{
        "uniqueName": "DevType"
    }],
    "columns": [{
        "uniqueName": "[Measures]"
    }],
    "measures": [{
        "uniqueName": "Salary",
        "aggregation": "average"
    }],
    "sorting": {
        "column": {
            "type": "desc",
            "tuple": [],
            "measure": {
                "uniqueName": "Salary",
                "aggregation": "average"
            }
        }
    }
}

Later, you can change the slice in run time with the drag-and-drop feature — as soon as you need to take a look from a different perspective.

稍后，您可以使用拖放功能在运行时更改切片-一旦需要从其他角度查看。

将图表和枢轴网格绑定在一起 (Bind charts and pivot grid together)

Let’s make the charts display the data from the pivot table. For this, attach an event handler to the reportcomplete event of Flexmonster. It is fired as soon as the pivot grid is ready to act as a data provider.

让我们让图表显示数据透视表中的数据。 为此，将事件处理程序附加到reportcomplete事件。 一旦枢轴网格准备好充当数据提供者，就会触发它。

The code looks as follows:

该代码如下所示：

reportcomplete: function() {
    pivot.off("reportcomplete");
    createFusionChart();
}

Now let’s get to the part of a code which will make a dashboard interactive.

现在，让我们看一下将使仪表板具有交互性的代码部分。

Define a function that is responsible for getting the data from the report, creating and drawing the chart.

定义一个负责从报表中获取数据，创建和绘制图表的函数。

In createFusionChart(), invoke the getData() method on the pivot table instance to get the data from the current report or the slice you need. This method pre-processes it to the given type of chart and passes the data to the callbackHandler and updateHandler. These handlers specify what happens once the report is displayed for the first time or when the data is updated (filtered, sorted, etc). In callbackHandler, you need to instantiate a chart and send the data to it. In updateHandler, simply set the updated data to the chart and render it again.

在createFusionChart()中 ，在数据透视表实例上调用getData()方法以从当前报告或所需的切片中获取数据。 此方法将其预处理为给定类型的图表，然后将数据传递给callbackHandler和updateHandler 。 这些处理程序指定在首次显示报表时或在更新数据(过滤，排序等)时发生的情况。 在callbackHandler中 ，您需要实例化图表并将数据发送给它。 在updateHandler中 ，只需将更新的数据设置为图表，然后再次呈现它。

Hooray! The chart and pivot table are rendered on the same page. Now the chart shows the data from the grid and reacts to any changes applied to the report.

万岁！ 图表和数据透视表显示在同一页面上。 现在，图表显示了来自网格的数据，并对应用于报告的任何更改做出了React。

In a similar manner, you can add as many charts as you need.

以类似的方式，您可以根据需要添加任意数量的图表。

For this data visualization, I’ve chosen a map, bar, and column charts.

对于此数据可视化，我选择了地图，条形图和柱形图。

我有什么 (What I’ve got)

After following all these steps, I’ve got a totally interactive dashboard based on the reporting tool and charts. Let me share with you some of the insights I’ve gained from the survey results data.

完成所有这些步骤后，我得到了一个基于报表工具和图表的完全交互式的仪表板 。 让我与您分享我从调查结果数据中获得的一些见解。

客层 (Demographics)

It can be easily seen from the graph that most developers who took the survey live in the United States, India, and Canada.

从图中可以很容易地看出，大多数参与调查的开发人员都居住在美国，印度和加拿大。

占用 (Occupation)

More than 18k of respondents are full-time students:

全日制学生超过18,000人：

Besides, around 80k of developers say they code outside of work in free time:

此外，大约有8万名开发人员说他们在业余时间编写代码：

It was interesting to find out the most common types of developers. They are back-end, full-stack, and mobile developers:

找出最常见的开发人员类型很有趣。 他们是后端，全栈和移动开发人员：

教育 (Education)

Most of the respondents have at least a bachelor’s degree:

大多数受访者至少具有学士学位：

More than 50.34K of developers majored in computer science, computer and software engineering:

计算机科学，计算机和软件工程专业的开发人员超过50.34K：

More than 23K of developers learned to code within the past five years:

在过去的五年中，超过23K的开发人员学会了编码：

框架，库和工具 (Frameworks, libraries, and tools)

Let’s get to the most desired frameworks, libraries, and tools with which developers want to work in the next year:

让我们了解开发人员希望在明年使用的最理想的框架，库和工具：

As you see, .NET Core, Node.js, React and TensorFlow got the most votes.

如您所见，.NET Core，Node.js，React和TensorFlow获得了最多的选票。

汇集全部 (Bringing it all together)

Using developer-friendly APIs and guides of the pivot table and a charting library, I’ve managed to get a big picture of the trends in the developer community. I encourage you to dive deeper into data and share unique insights with your friends and teammates.

使用开发人员友好的API和数据透视表以及图表库的指南，我已经成功地了解了开发人员社区中的趋势。 我鼓励您更深入地研究数据，并与您的朋友和队友分享独特的见解。

I hope this tutorial will inspire you to create your visualization project.

我希望本教程会启发您创建可视化项目。

Thank you for reading!

感谢您的阅读！

Useful links

有用的链接

• CodePen live demo

  CodePen现场演示

• How to integrate Flexmonster with FusionCharts

  如何将Flexmonster与FusionCharts集成

• FusionCharts: charts gallery

  FusionCharts：图表库

翻译自: https://www.freecodecamp.org/news/analysis-of-developers-trends-with-javascript-pivot-table-and-charting-library-b7b6e16ab71b/

javascript 图表