Highcharts - 温度计

joh*_*hnd 2 temperature highcharts

我目前可以看到的Highcharts的一个缺点是它的仪表库中似乎没有类似温度计的任何东西.我可以看到,你也许可以捣鼓东西,但例如,使用1列条形图或类似的东西,但并没有真正开始看起来像IE浏览器在底部的颜色填充灯泡,甚至是圆形的底座温度计.

我是否忽略了这样做的方式,还是仅仅从Highcharts曲目中遗漏了?Highcharts的任何人都在关注评论吗?

Mar*_*ark 7

但它确实听起来好像我会在这个上与Highcharts运气不好,这对于现有形状的这种简单修改是一种耻辱.

不要轻易放弃.Highcharts是一种工具; 如果它不能完全按照你想要的那样做,那就自己动手吧.这是一个优秀的软件开发人员.

例如,这个小提琴将温度计的SVG图像与36行代码中的柱形图相结合.它需要一些润色,但希望它可以让你去.

在此输入图像描述

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column',
                marginBottom: 53
            },
            credits: {
                enabled: false
            },
            title: null,
            legend: {
                enabled: false
            },
            exporting: {
                enabled: false   
            },
            yAxis: {
                min: 0,
                max: 100,
                title: null,
                align: 'right'
            },
            xAxis: {
                labels: false
            },
            series: [{
                data: [60],
                color: 'red'
             }]
        }, function(chart) { // on complete

        chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg', 0, 0, 256, 400)
            .add();         
    });
}); 
Run Code Online (Sandbox Code Playgroud)