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

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

要實(shí)現(xiàn)最終效果，我們要分三步走：

生成折線圖；

生成自定義提示；

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

首先，我們要設(shè)置折線圖的位置。

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

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

設(shè)置x軸數(shù)據(jù)

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

設(shè)置y軸數(shù)據(jù)

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軸的數(shù)據(jù)打包成數(shù)據(jù)包：

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

設(shè)置顯示的效果(這里是直接從官網(wǎng)示例里copy過(guò)來(lái)的:-)

 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);

本階段效果

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

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

很簡(jiǎn)單，這個(gè)功能屬于圖表的要顯示的效果，還記得剛才我們?cè)O(shè)置的lineChartOptions嗎，它就是設(shè)定顯示效果的參數(shù)。只要在其中設(shè)定一項(xiàng)新的參數(shù)multiTooltipTemplate即可，該參數(shù)用于自定義數(shù)據(jù)提示tooltip。

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

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

該功能雖然簡(jiǎn)單，但基本上出圖表都會(huì)用到，所以在此專門用一節(jié)來(lái)說(shuō)明。

終于到達(dá)我們的重頭戲，現(xiàn)在要來(lái)實(shí)現(xiàn)圖示功能了。

我們?cè)賹⑦@個(gè)大目標(biāo)劃分為兩個(gè)具體的小目標(biāo)：
首先，我們先將圖示展示出來(lái)；
接著，點(diǎn)擊圖示之后，動(dòng)態(tài)顯示或隱藏指定的折線。

我們之前已經(jīng)設(shè)置好了圖例所在，現(xiàn)在填入兩個(gè)checkbox。

  

    

      
      
      
      My First dataset
    
    

      
      
      
      My Second dataset
    
  

為兩條折線添加了checkbox，但點(diǎn)擊了它折線也沒有變化。沒關(guān)系，我們現(xiàn)在來(lái)為折線添加上事件響應(yīng)，使得圖表能自由顯示或是隱藏折線。

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

現(xiàn)在我們?yōu)閏heckbox添加上了事件響應(yīng)，具體的響應(yīng)事件將在下一節(jié)說(shuō)明。

要想知道如何讓折線從圖表中顯示出來(lái)，或是消息，首先要來(lái)了解曲線的數(shù)據(jù)結(jié)構(gòu)。
ChartJS里的點(diǎn)是由數(shù)據(jù)包構(gòu)成的，而一個(gè)數(shù)據(jù)包分成兩部分：一塊包含點(diǎn)的信息，一塊用于顯示該點(diǎn)。

了解了ChartJS上折線圖的數(shù)據(jù)結(jié)構(gòu)，大家也就明白了：顯示一條折線，即是添加points；隱藏一條折線，即是將其points去除。

所以，當(dāng)某一條曲線被選中時(shí)，我們就根據(jù)該曲線的信息生成新的點(diǎn)；

if ($(this).is(":checked")) {
    // 插入被選中折線上的點(diǎn)
    $.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
      }));
    });
}

當(dāng)一條曲線被取消選中時(shí)，我們只需要將這條曲線上的點(diǎn)到清空即可。

else {
    // 刪除被選中折線上的點(diǎn)
    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）

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