在今天的教程中，我們將深入研究自定義繪圖并創(chuàng)建一個(gè)交互式HTML5折線圖，其中負(fù)值的片段使用與圖形其余部分不同的顏色繪制。

點(diǎn)擊下載Anychart最新試用版

數(shù)據(jù)可視化任務(wù)

我們收到客戶的要求，如下情況：

這是我們需要的折線圖類型：當(dāng)數(shù)據(jù)變?yōu)樨?fù)值時(shí)，線條的顏色必須變?yōu)榧t色，圖形和X軸之間的交叉點(diǎn)必須顯示時(shí)間戳。是否可以在AnyChart JS Charts中進(jìn)行？

下面是客戶所附的圖片，用于說(shuō)明數(shù)據(jù)可視化任務(wù)，并向我們展示所需的圖表：

要根據(jù)此任務(wù)創(chuàng)建數(shù)據(jù)可視化解決方案，我們需要使用以下內(nèi)容：

• AnyChart JavaScript圖表庫(kù)的自定義繪圖功能;

• 軸標(biāo)記線（用于零線）;

• 一些數(shù)學(xué)計(jì)算
  

方案概述

要顯示這樣的圖表，我們需要更改負(fù)責(zé)在折線圖中繪制線條的函數(shù)。

我們需要得到兩組線段，一組的所有點(diǎn)都在零以上，另一組的所有點(diǎn)都是負(fù)值。每個(gè)線段將與來(lái)自同一組的其他線段或零線上的附加點(diǎn)連接。

基本數(shù)學(xué)將幫助我們創(chuàng)建一組附加點(diǎn) - 系列線和零線之間的交點(diǎn)（一組X值，其中Y等于0）。

自定義繪圖

您可以在我們的圖表文檔的專用部分中了解系列繪圖功能的自定義。

自定義繪圖功能使用點(diǎn)坐標(biāo)，Y軸為當(dāng)前點(diǎn)。這意味著我們只需要計(jì)算X并繪制線段，每個(gè)線段將根據(jù)其值進(jìn)行著色。

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

不同的顏色

每個(gè)系列都有不能使用的方法。例如，一個(gè)簡(jiǎn)單的系列使用stroke（）方法，但它不使用lowStroke（）。

讓我們使用lowStroke（）來(lái)設(shè)置圖表負(fù)面部分的顏色。

series.lowStroke('red');

然后，在創(chuàng)建自定義形狀時(shí)，我們將指定負(fù)片段的顏色來(lái)自使用lowStroke設(shè)置的值。

strokeName: 'lowStroke',

這是我們得到的結(jié)果：

查看圖表的完整代碼：

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

實(shí)際上，AnyChart可以幫助您應(yīng)對(duì)任何甚至復(fù)雜和非凡的數(shù)據(jù)可視化任務(wù)和任何自定義繪圖。感興趣的朋友趕快下載或打開(kāi)AnyChart嘗試一下吧！

如果本篇教程對(duì)您有用的話，歡迎分享您的疑問(wèn)和看法~

有想要購(gòu)買(mǎi)AnyChart正版授權(quán)的朋友可以~

有關(guān)產(chǎn)品資訊的更多精彩內(nèi)容，敬請(qǐng)關(guān)注下方的微信公眾號(hào)▼▼▼