# 利用JavaScript实现数据可视化

Element to Hold the Chart......................................... 7 Step 3: Define the Data........................................................................................... 7 Step 4: Draw the Chart............................................................................................ 8 Step 5: Fix the Vertical Axis.................................................................................... 9 Step 6: Fix the Horizontal Axis............................................................................. 10 Step 7: Adjust the Styling.......................................................................................12 Step 8: Vary the Bar Color......................................................................................13 Step 9: Work Around Flotr2 “Bugs”..................................................................... 14 Plotting Continuous Data with a Line Chart................................................................. 15 Step 1: Define the Data......................................................................................... 15 Step 2: Graph the CO2 Data................................................................................. 16 Step 3: Add the Temperature Data.......................................................................17 Step 4: Improve the Chart’s Readability...............................................................17 Step 5: Clarify the Temperature Measurements................................................ 18 Step 6: Label the Chart......................................................................................... 20 Step 7: Work Around Flotr2 “Bugs”..................................................................... 21 Emphasizing Fractions Using a Pie Chart...................................................................... 21 Step 1: Define the Data......................................................................................... 23 Step 2: Draw the Chart.......................................................................................... 23 Step 3: Label the Values........................................................................................ 24 Step 4: Work Around Flotr2 “Bugs”..................................................................... 25 Plotting X/Y Data with a Scatter Chart.......................................................................... 25 Step 1: Define the Data......................................................................................... 26 Step 2: Format the Data........................................................................................ 26 Step 3: Plot the Data.............................................................................................. 26 Step 4: Adjust the Chart’s Axes............................................................................ 27 Step 5: Label the Data........................................................................................... 28 Step 6: Clarify the X-Axis....................................................................................... 29 Step 7: Answer Users’ Questions......................................................................... 30 Step 8: Work Around Flotr2 “Bugs”..................................................................... 33 Adding Magnitudes to X/Y Data with a Bubble Chart................................................ 34 Step 1: Define the Data......................................................................................... 34 Step 2: Create a Background for the Chart......................................................... 35 Step 3: Plot the Data.............................................................................................. 36 x | Co ntents in Detail Step 4: Add the Background................................................................................ 37 Step 5: Color the Bubbles..................................................................................... 38 Step 6: Adjust the Legend Styles......................................................................... 40 Step 7: Work Around Flotr2 “Bugs”..................................................................... 41 Displaying Multidimensional Data with a Radar Chart................................................ 41 Step 1: Define the Data......................................................................................... 42 Step 2: Create the Chart....................................................................................... 44 Step 3: Work Around Flotr2 “Bugs”..................................................................... 45 Summing Up..................................................................................................................... 46 Chapter 2: Making Charts Interactive............................................................... 47 Selecting Chart Content................................................................................................. 48 Step 1: Include the Required JavaScript Libraries.............................................. 49 Step 2: Set Aside a
Element to Hold the Chart....................................... 50 Step 3: Prepare the Data....................................................................................... 50 Step 4: Draw the Chart.......................................................................................... 51 Step 5: Add the Controls...................................................................................... 52 Step 6: Define the Data Structure for the Interaction........................................ 54 Step 7: Determine Chart Data Based on the Interaction State........................ 55 Step 8: Add the Controls Using JavaScript......................................................... 57 Step 9: Respond to the Interaction Controls...................................................... 58 Zooming In on Charts...................................................................................................... 59 Step 1: Prepare the Page....................................................................................... 60 Step 2: Draw the Chart.......................................................................................... 60 Step 3: Prepare the Data to Support Interaction................................................61 Step 4: Prepare to Accept Interaction Events..................................................... 62 Step 5: Enable the Interaction.............................................................................. 63 Tracking Data Values....................................................................................................... 65 Step 1: Set Aside a
Element to Hold the Chart Within our document, we need to create a
element to contain the chart. This element must have an explicit height and width, or Flotr2 won’t be able to construct the chart. We can indicate the element’s size in a CSS style sheet, or we can place it directly on the element itself. Here’s how the document might look with the latter approach.
Note that we’ve given the
an explicit id ("chart") so we can reference it later. You’ll need to use a basic template like this (importing the Flotr2 library and setting up the
) for all the charts in this chapter. Step 3: Define the Data Now we can tackle the data that we want to display. For this example, I’ll use the number of Manchester City wins in the English Premier League for the past seven years. Of course you’ll want to substitute your actual data values, either with inline JavaScript (like the following example) or by another means (such as an AJAX call to the server). 8 | Cha pter 1 As you can see, we have three layers of arrays. Let’s start from the inside and work our way out. For Flotr2 charts, each data point is entered in a two-item array with an x-value and y-value. In our case we’re using the year as the x-value and the number of wins as the y-value. We collect all these values in another array called a series. We place this series inside one more outer array. We could enter multiple series into this outer array, but for now we’re showing only one series. Here’s a quick summary of each layer: >> Each data point consists of an x-value and a y-value packaged in an array. >> Each series consists of a set of data points packaged in an array. >> The data to chart consists of one or more series packaged in an array. Step 4: Draw the Chart That’s all the setup we need. A simple call to the Flotr2 library, as shown here, creates our first attempt at a chart. window.onload = function () { Flotr.draw( document.getElementById("chart"), wins, { bars: { show: true } } ); }; First we make sure the browser has loaded our document; otherwise, the chart
might not be present. That’s the point of window.onload. Once that event occurs, we call Flotr.draw with three parameters: the HTML element to con- tain the chart, the data for the chart, and any chart options (in this case, we specify options only to tell Flotr2 to create a bar chart from the data). Since Flotr2 doesn’t require jQuery, we haven’t taken advantage of any of jQuery’s shortcuts in this example. If your page already includes jQuery, you can use the standard jQuery conventions for the Flotr2 charts in this chapter to execute the script after the window has loaded, and to find the