又快又好！巧用ChartJS打造你的實用折線圖

最終效果

圖片描述

本示例利用官方示例改造而成，生成帶圖示的折線圖，標出各折線的名稱，可以篩選想要顯示的折線。

要實現最終效果，我們要分三步走：

生成折線圖；
生成自定義提示；
生成圖示（折線顯示控制板）

圖片描述

生成折線圖

首先，我們要設置折線圖的位置。

<div style="width:50%">
    <div id="line-legend">
    </div>
    <div>
        <canvas id="line-chart" height="450px" width="800px"></canvas>
    </div>
</div>

我們將圖表放置於id為line-chart的canvas中，而圖例則在id為line-legend的div中。

接着，我們要生成折線圖。

設置x軸數據

var x_labels = ["January","February","March","April","May","June","July"];

設置y軸數據

var default_datasets = [
        {
            label: "My First dataset",
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "My Second dataset",
            fillColor : "rgba(151,187,205,0.2)",
            strokeColor : "rgba(151,187,205,1)",
            pointColor : "rgba(151,187,205,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }
    ];

將x軸和y軸的數據打包成數據包：

 var lineChartData = {
    labels : x_labels,
    datasets : default_datasets
 };

設置顯示的效果(這里是直接從官網示例里copy過來的:-)

 var lineChartOptions = {
    //Boolean - If we should show the scale at all
    showScale: true,
    ...
    //Boolean - whether to make the chart responsive to window resizing
    responsive: true,
};

生成折線圖

var lineChartCanvas = chart.get(0).getContext("2d");
var lineChart = new Chart(lineChartCanvas);
var line_chart_handle = lineChart.Line(lineChartData, lineChartOptions);

本階段效果

圖片描述

以上示例可參考官方教程。

自定義提示

剛才我們成功地繪制了一張圖表，但是基本圖表中的提示只顯示了折線的顏色和值，我們還希望能把折線的名稱也加上，那到底該怎么做呢？

很簡單，這個功能屬於圖表的要顯示的效果，還記得剛才我們設置的lineChartOptions嗎，它就是設定顯示效果的參數。只要在其中設定一項新的參數multiTooltipTemplate即可，該參數用於自定義數據提示tooltip。

 multiTooltipTemplate: "<%if (datasetLabel){%><%=datasetLabel%>: <%}%><%= value %>"

上面的代碼是什么意思呢？大致可以看出，是給multiTooltipTemplate賦了一個值，而這個值就是我們想要顯示的數據的樣式。你大概猜到了，datasetLabel其實就是折線標題的變量。

圖片描述

該功能雖然簡單，但基本上出圖表都會用到，所以在此專門用一節來說明。

生成圖示

終於到達我們的重頭戲，現在要來實現圖示功能了。

我們再將這個大目標划分為兩個具體的小目標：
首先，我們先將圖示展示出來；
接着，點擊圖示之后，動態顯示或隱藏指定的折線。

添加展示圖示

我們之前已經設置好了圖例所在，現在填入兩個checkbox。

<div id="line-legend">
  <ul class="line-legend">
    <li class="checkbox-five">
      <input type="checkbox" name="line-legend" value="0" checked="checked">
      <label for="line-legend" style="background-color:rgba(220, 220, 220, 1);">
      </label>
      <span>My First dataset</span>
    </li>
    <li class="checkbox-five">
      <input type="checkbox" name="line-legend" value="1" checked="checked">
      <label for="line-legend" style="background-color:rgba(151, 187, 205, 1);">
      </label>
      <span>My Second dataset</span>
    </li>
  </ul>
</div>

添加曲線選項事件響應

為兩條折線添加了checkbox，但點擊了它折線也沒有變化。沒關系，我們現在來為折線添加上事件響應，使得圖表能自由顯示或是隱藏折線。

// 給圖例中的選框增加事件響應
// 被選中的則顯示其對應折線，未選中的不顯示
$('[name = \'line-legend\']:checkbox').each(function(key, value) {
    // 設置所有的checkbox為選中
    $(this).attr('checked', true);
    // 設置checkbox被取消選擇之后，將該曲線消除
    $(this).click(function() {
        // 顯示相應的折線
    } else {
        // 刪除被選中折線上的點
    }
});

現在我們為checkbox添加上了事件響應，具體的響應事件將在下一節說明。

ChartJS數據結構

要想知道如何讓折線從圖表中顯示出來，或是消息，首先要來了解曲線的數據結構。
ChartJS里的點是由數據包構成的，而一個數據包分成兩部分：一塊包含點的信息，一塊用於顯示該點。

圖片描述

了解了ChartJS上折線圖的數據結構，大家也就明白了：顯示一條折線，即是添加points；隱藏一條折線，即是將其points去除。

所以，當某一條曲線被選中時，我們就根據該曲線的信息生成新的點；

if ($(this).is(':checked')) {
    // 插入被選中折線上的點
    $.each(y_datasets[index].data, function(key, value) {
      line_chart_handle.datasets[index].points.push(new line_chart_handle.PointClass({
        value : value,
        label : lineChartData.labels[key],
        datasetLabel : lineChartData.datasets[index].label,
        x: line_chart_handle.scale.calculateX(line_chart_handle.scale.valuesCount + 1),
        y: line_chart_handle.scale.endPoint,
        strokeColor : line_chart_handle.datasets[index].pointStrokeColor,
        fillColor : line_chart_handle.datasets[index].pointColor
      }));
    });
}

當一條曲線被取消選中時，我們只需要將這條曲線上的點到清空即可。

else {
    // 刪除被選中折線上的點
    for (var i = line_chart_handle.datasets[index].points.length - 1; i >= 0; i--) {
      line_chart_handle.datasets[index].points.shift();
    }
}

大功告成！

示例下載

下載地址：百度雲（http://pan.baidu.com/s/1c00oYJm）

注：如果鏈接失效了，私信我吧~（希望你不要以為我有別的企圖）