半岛外围网上直营

在今天的教程中，我们将深入研究自定义绘图并创建一个交互式HTML5折线图，其中负值的片段使用与图形其余部分不同的颜色绘制。

点击下载Anychart最新试用版

数据可视化任务

我们收到客户的要求，如下情况：

这是我们需要的折线图类型：当数据变为负值时，线条的颜色必须变为红色，图形和X轴之间的交叉点必须显示时间戳。是否可以在AnyChart JS Charts中进行？

下面是客户所附的图片，用于说明数据可视化任务，并向我们展示所需的图表：

要根据此任务创建数据可视化解决方案，我们需要使用以下内容：

• AnyChart JavaScript图表库的自定义绘图功能;

• 轴标记线（用于零线）;

• 一些数学计算
  

方案概述

要显示这样的图表，我们需要更改负责在折线图中绘制线条的函数。

我们需要得到两组线段，一组的所有点都在零以上，另一组的所有点都是负值。每个线段将与来自同一组的其他线段或零线上的附加点连接。

基本数学将帮助我们创建一组附加点 - 系列线和零线之间的交点（一组X值，其中Y等于0）。

自定义绘图

您可以在我们的图表文档的专用部分中了解系列绘图功能的自定义。

自定义绘图功能使用点坐标，Y轴为当前点。这意味着我们只需要计算X并绘制线段，每个线段将根据其值进行着色。

var zeroX = (this.zero - context.prevY) / (this.value - context.prevY) * (this.x - context.prevX) + context.prevX;

不同的颜色

每个系列都有不能使用的方法。例如，一个简单的系列使用stroke（）方法，但它不使用lowStroke（）。

让我们使用lowStroke（）来设置图表负面部分的颜色。

series.lowStroke('red');

然后，在创建自定义形状时，我们将指定负片段的颜色来自使用lowStroke设置的值。

strokeName: 'lowStroke',

这是我们得到的结果：

查看图表的完整代码：

anychart.onDocumentReady(function () {
    // create data
    var data = [
        {x: Date.UTC(2014, 5, 6, 1, 15, 0), value: -10},
        {x: Date.UTC(2014, 5, 6, 6, 30, 0), value: 15},
        {x: Date.UTC(2014, 5, 6, 12, 45, 0), value: 5},
        {x: Date.UTC(2014, 5, 6, 19, 20, 0), value: 45},
        {x: Date.UTC(2014, 5, 6, 22, 0, 0), value: 25},
        {x: Date.UTC(2014, 5, 7, 2, 5, 0), value: -12},
        {x: Date.UTC(2014, 5, 7, 7, 25, 0), value: -13},
        {x: Date.UTC(2014, 5, 7, 13, 45, 0), value: 4},
        {x: Date.UTC(2014, 5, 7, 20, 5, 0), value: 43},
        {x: Date.UTC(2014, 5, 7, 23, 15, 0), value: 23},
        {x: Date.UTC(2014, 5, 8, 2, 5, 0), value: -20}
    ];
    // create a chart
    var chart = anychart.line();
    //set the DateTime type of scale
    chart.xScale(anychart.scales.dateTime());
    //set the zero line by yAxis
    var zeroLine = chart.lineMarker();
    zeroLine.value(0);
    zeroLine.stroke("2 grey");
    // create a spline series and set the data
    var series = chart.line(data);
    // point settings
    setupDrawer(series, chart);
    // set the red stroke for line segments below the zero line
    series.normal().lowStroke('red');
    // tooltip settings
    chart.tooltip({
        titleFormat: function () {            return anychart.format.dateTime(this.x, "dd MMMM HH:mm");
        },
        format: "Value: {%Value}"
    });
    chart.container('container');
    chart.draw();
    /**
     * Custom series drawing function
     * @param series - current series
     * @param chart - current chart
     */
    function setupDrawer(series, chart) {        var xAxis = chart.xAxis();
        // array for standalone labels and counter
        var zeroLabels = [];
        // remove old current labels when resizing the container
        window.onresize = function () {            var label;            while (label = zeroLabels.pop()) label.dispose();
        };
        // add the second shape for the line path below the zero line
        var tmp = series.rendering().shapes();
        tmp.push({
            name: 'negative',            shapeType: 'path',            fillName: null,            strokeName: 'lowStroke',            isHatchFill: false,            zIndex: 1
        });
        // create a context for how each point will be drawn
        var context = {            series: series,            prevPointDrawn: false,            prevWasNegative: false,            prevX: null,            prevY: null
        };
        var customRenderer = series.rendering();
        customRenderer.needsZero(true);
        customRenderer.shapes(tmp);
        customRenderer.start(function () {
            context.prevPointDrawn = false;
        });
        var customPointDrawer = function () {            if (this.missing) {
                context.prevPointDrawn = context.prevPointDrawn && context.series.connectMissing();
            } else {                // get a shape depending on a point's state
                var shapes = this.getShapesGroup(this.seriesState);                // set what point is negative
                var isNegative = this.getDataValue('value') < 0;                // determine the path of the current point to continue drawing
                var currPath = isNegative ? shapes['negative'] : shapes['stroke'];                if (context.prevPointDrawn) {                    // enter only if the plus-minus nature has changed
                    if (isNegative != context.prevWasNegative) {                        // determine the path of the previous point to continue drawing
                        var prevPath = context.prevWasNegative ? shapes['negative'] : shapes['stroke'];                        // determine the position of 0 (by X)
                        var zeroX = (this.zero - context.prevY) / (this.value - context.prevY) * (this.x - context.prevX) + context.prevX;                        // draw the previous point from zero
                        prevPath.lineTo(zeroX, this.zero);                        // draw the current point from zero
                        currPath.moveTo(zeroX, this.zero);
                        var localCoordinates = chart.globalToLocal(zeroX, this.zero);                        var ratio = (localCoordinates.x - xAxis.getPixelBounds().left ) / xAxis.getPixelBounds().width;                        var time = chart.xScale().inverseTransform(ratio);
                        // draw a label for the crossing between the series line and the zero line
                        var zeroLbl = anychart.standalones.label();
                        zeroLbl.text(anychart.format.dateTime(time, "HH:mm"));
                        zeroLbl.offsetX(zeroX);
                        zeroLbl.offsetY(this.zero);
                        zeroLbl.container(chart.container());
                        zeroLbl.draw();
                        zeroLabels.push(zeroLbl);
                    }
                    currPath.lineTo(this.x, this.value);
                } else {                    // draw the very first point
                    currPath.moveTo(this.x, this.value);
                }
                context.prevX = this.x;
                context.prevY = this.value;
                context.prevWasNegative = isNegative;
                context.prevPointDrawn = true;
            }
        };
        customRenderer.point(customPointDrawer);
    }});

实际上，AnyChart可以帮助您应对任何甚至复杂和非凡的数据可视化任务和任何自定义绘图。感兴趣的朋友赶快下载或打开AnyChart尝试一下吧！

如果本篇教程对您有用的话，欢迎分享您的疑问和看法~

有想要购买AnyChart正版授权的朋友可以~

有关产品资讯的更多精彩内容，敬请关注下方的微信公众号▼▼▼