不规则间隔的仪表盘 Highcharts(或其他库)
创始人
2024-12-24 18:01:14
0

以下是一个使用Highcharts库创建不规则间隔的仪表盘的示例代码:

// 创建数据数组
var data = [
    [0, 10],
    [10, 20],
    [20, 30],
    [30, 50],
    [50, 70],
    [70, 90],
    [90, 100]
];

// 创建仪表盘配置
var gaugeOptions = {

    chart: {
        type: 'solidgauge'
    },

    title: null,

    pane: {
        center: ['50%', '85%'],
        size: '140%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
        }
    },

    tooltip: {
        enabled: false
    },

    // 仪表盘的刻度线和标签
    yAxis: {
        stops: [
            [0.1, '#55BF3B'], // 绿色
            [0.5, '#DDDF0D'], // 黄色
            [0.9, '#DF5353'] // 红色
        ],
        lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
            y: -70
        },
        labels: {
            y: 16
        }
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                y: 5,
                borderWidth: 0,
                useHTML: true
            }
        }
    }
};

// 创建仪表盘
var chart = Highcharts.chart('container', Highcharts.merge(gaugeOptions, {
    yAxis: {
        min: 0,
        max: 100,
        title: {
            text: 'Speed'
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: 'Speed',
        data: data,
        dataLabels: {
            format: '
{y}
' + 'km/h
' }, tooltip: { valueSuffix: ' km/h' } }] })); // 更新仪表盘的数据 function updateGaugeData(newData) { chart.series[0].setData(newData); } // 示例用法 var newData = [ [0, 30], [30, 60], [60, 80], [80, 90], [90, 95], [95, 100] ]; updateGaugeData(newData);

你可以将上述代码保存为一个HTML文件,并在浏览器中打开它,以查看不规则间隔的仪表盘。

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...