Question

我想将图的正负值集成到我的网站中。如果该值为负，则它将变为红色部分；如果该值为负，则将变为绿色部分。

现在我无法在javascript中找到这种图形库，这种图形的确切名称是什么？

请让我知道解决方法。

Answer 1

我找到的最接近的名字只是一个“数字行”，看起来this JavaScript library上有一个具体的例子：

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

但是我认为通常最好用D3.js构建自定义的一维图。

Answer 2

可以通过使用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

使用正值和负值的JS图（单线图）

2 个答案: