搜索基于 JS（Highcharts、AnyChart 等）的温度计或具有多个指针的垂直线性仪表

Question

尽管梳理了网络，但我一直无法找到一个示例作为起点。我希望使用 Highcharts、AnyChart 或类似的基于 JS 的图表库在所附图像中重新创建温度计。任何示例的线索都将不胜感激。

如您所见，我们的想法是以直观且整洁的方式在单个温度计或仪表上显示多个数据值。

谢谢，

猴面包树

Answer 1

您可以使用 Highcharts 创建该类型的图表。使用例如 column 系列类型，每个段都可以是列的可见部分。要轻松添加渐变颜色，请使用带停止的颜色轴。最后，要添加指针，请使用 SVG.Renderer class.

    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.net/BlackLabel/qtjs5hc6/1/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

https://api.highcharts.com/highcharts/chart.events.load

https://api.highcharts.com/highcharts/colorAxis

Answer 2

您可以使用 AnyChart 的 Linear Gauge 实现这一点。 Here is the sample of the chart you are looking for. In addition, you can take al look at another sample。您可以从以下两篇文档文章开始：

https://docs.anychart.com/Gauges/Linear_Gauge

https://docs.anychart.com/Gauges/Pointers_and_Data

搜索基于 JS（Highcharts、AnyChart 等）的温度计或具有多个指针的垂直线性仪表

Searching for JS based (Highcharts, AnyChart, etc) thermometer or vertical linear gauge with multiple pointers

javascript

dashboard

highcharts

gauge

anychart