资讯专栏INFORMATION COLUMN

又快又好!巧用ChartJS打造你的实用折线图

qqlcbb / 1971人阅读

摘要:又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线。了解了上折线图的数据结构,大家也就明白了显示一条折线,即是添加隐藏一条折线,即是将其去除。

又快又好!巧用ChartJS打造你的实用折线图 最终效果

本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线。

要实现最终效果,我们要分三步走:

生成折线图;

生成自定义提示;

生成图示(折线显示控制板)

生成折线图

首先,我们要设置折线图的位置。

我们将图表放置于id为line-chartcanvas中,而图例则在id为line-legenddiv中。

接着,我们要生成折线图。

设置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里的点是由数据包构成的,而一个数据包分成两部分:一块包含点的信息,一块用于显示该点。

了解了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)

注:如果链接失效了,私信我吧~(希望你不要以为我有别的企图)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/60873.html

相关文章

  • 又快又好巧用ChartJS打造你的实用线图

    摘要:又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线。了解了上折线图的数据结构,大家也就明白了显示一条折线,即是添加隐藏一条折线,即是将其去除。 又快又好!巧用ChartJS打造你的实用折线图 最终效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

    channg 评论0 收藏0
  • 又快又好巧用ChartJS打造你的实用线图

    摘要:又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线。了解了上折线图的数据结构,大家也就明白了显示一条折线,即是添加隐藏一条折线,即是将其去除。 又快又好!巧用ChartJS打造你的实用折线图 最终效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

    Airmusic 评论0 收藏0
  • 又快又好巧用ChartJS打造你的实用线图

    摘要:又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线。了解了上折线图的数据结构,大家也就明白了显示一条折线,即是添加隐藏一条折线,即是将其去除。 又快又好!巧用ChartJS打造你的实用折线图 最终效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

    junfeng777 评论0 收藏0
  • 五个步骤,帮助您又快又好地管理混合云

    摘要:云计算这个词出现至今,一直是科技技术领域的热门。混合云虽然很便捷,但是由于它是不同的云组合起来的云计算环境,企业在管理时会碰到不好管理的问题。以下五个步骤,可以帮助您又快又好地管理混合云。云计算这个词出现至今,一直是科技技术领域的热门。云计算又分为公有云、私有云和混合云,近两年,混合云因为具有灵活性强的特点,成为众多企业的首选,企业借助混合云,可以根据业务需求进行云上迁移。 混合云虽然...

    Terry_Tai 评论0 收藏0
  • sass笔记-1|Sass是如何帮你又快又好地搞定CSS的

    摘要:输出的是这样的可以看到,当用继承的样式时,和也完全套用了的样式,而且你会发现,规则并没有被重复输出,而且这样的方式更符合我们对于这几个选择器的认知如果你之前用过面向对象编程的话。 Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sass的设...

    xiaolinbang 评论0 收藏0

发表评论

0条评论

qqlcbb

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<