摘要：又快又好巧用打造你的實用折線圖最終效果本示例利用官方示例改造而成，生成帶圖示的折線圖，標出各折線的名稱，可以篩選想要顯示的折線。了解了上折線圖的數據結構，大家也就明白了顯示一條折線，即是添加隱藏一條折線，即是將其去除。

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

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

生成折線圖；

生成自定義提示；

生成圖示（折線顯示控制板）

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

我們將圖表放置于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。

  

    

      
      
      
      My First dataset
    
    

      
      
      
      My Second dataset
    
  

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

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

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

要想知道如何讓折線從圖表中顯示出來，或是消息，首先要來了解曲線的數據結構。
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）

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