JS Графики с использованием положительных и отрицательных значений (однолинейный график)

Question

Я хочу интегрировать график в мой сайт с положительными и отрицательными значениями.Если значение отрицательное, то оно перейдет в красный раздел, если нет - в положительный, то перейдет в зеленый.

В настоящее время я не могу найти такой тип библиотеки графов в javascript, что будетточное название этого типа графиков?

Пожалуйста, дайте мне знать решение.

Answer 1

Вы можете создать этот тип диаграммы, используя Highcharts. Пожалуйста, проверьте пример ниже:

Highcharts.chart('container', {
    chart: {
        inverted: true,
        height: 80,
        events: {
            load: function() {
                var yAxis = this.yAxis[0],
                    y = this.plotTop + this.plotHeight / 2,
                    center = yAxis.toPixels(0);

                this.renderer.path([
                    'M', this.plotLeft, y, 'L', center, y
                ]).attr({
                    'stroke-width': 1,
                    stroke: 'red'
                }).add();

                this.renderer.path([
                    'M', center, y, 'L', this.plotSizeY + this.plotLeft, y
                ]).attr({
                    'stroke-width': 1,
                    stroke: 'green'
                }).add();
            }
        }
    },
    title: {
        text: ''
    },
    credits: {
        enabled: false
    },
    legend: {
        enabled: false
    },
    yAxis: {
        title: {
            text: ''
        },
        tickPositions: [-18, 0, 27],
        gridLineWidth: 2
    },
    xAxis: {
        visible: false
    },
    series: [{
        type: 'scatter',
        data: [21],
        marker: {
            fillColor: 'orange',
            radius: 10
        }
    }]
});

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/x9vo0tr6/

API: https://api.highcharts.com/highcharts

Answer 2

Ближайшее имя, которое я нашел, это просто «номерная строка», и похоже, что эта библиотека JavaScript имеет конкретный пример этого:

https://jsxgraph.uni-bayreuth.de/wiki/index.php/Number_line

Но я думаю, что в целом вам лучше создать собственный одномерный график с помощью D3.js , например.