搜索基于JS(Highcharts、AnyChart等)的多指针温度计或垂直线性测量仪。

Question

尽管梳理了网络，我一直无法找到一个可以作为起点的例子。我正在寻找使用Highcharts、AnyChart或类似的基于JS的图表库来重新创建附图中的温度计仪表。任何例子的线索都将是非常感激的。

正如你所看到的，我们的想法是在一个温度计或仪表上以直观和不混乱的方式显示多个数据值。

谢谢。

猴面包树

Answer 1

你可以通过使用Highcharts创建该类型的图表。例如，使用 column 串联类型，每一段都可以是列的可见部分。为了方便添加渐变色，可以使用带止点的颜色轴。最后，要添加指针，请使用 SVG.Renderer 类。

    colorAxis: {
        visible: false,
        stops: [
            [0, '#00bfff'],
            [0.3, '#007bff'],
            [0.35, '#0dc200'],
            [0.5, '#bbff99'],
            [0.55, '#ff8400'],
            [0.9, '#ff0000']
        ],
    },
    series: [{
        pointWidth: 40,
        type: 'column',
        borderWidth: 0,
        threshold: 15,
        data: [
            [0, 85],
            [0, 80],
            [0, 75],
            [0, 70],
            [0, 65],
            [0, 60],
            [0, 55],
            [0, 50],
            [0, 45],
            [0, 40],
            [0, 35],
            [0, 30],
            [0, 25],
            [0, 20]
        ]
    }]

---

现场演示。 http:/jsfiddle.netBlackLabelqtjs5hc61。

API参考。

https:/api.highcharts.comclass-referenceHighcharts.SVGRenderer#text

https:/api.highcharts.comclass-referenceHighcharts.Axis#toPixels。

https:/api.highcharts.comhighchartschart.event.load。

https:/api.Highcharts.comhighchartscolorAxis

Answer 2

你可以使用AnyChart的Linear Gauge来实现。以下是示例 的图表。此外，你可以看看 另一个例子.你可以从以下两篇文档文章开始。

https:/docs.anychart.comGaugesLinear_Gauge。

https:/docs.anychart.comGaugesPointers_and_Data。