在今天的教程中，我們將深入研究自定義繪圖并創建一個交互式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正版授權的朋友可以~

有關產品資訊的更多精彩內容，敬請關注下方的微信公眾號▼▼▼