首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

C3JS -有没有办法动态更新仪表图上的color.threshold值?

C3JS是一个基于D3.js的开源图表库,用于创建各种交互式图表和可视化效果。在C3JS中,可以通过配置选项来自定义图表的外观和行为。

对于仪表图(Gauge Chart)来说,color.threshold值用于定义颜色的阈值,即当仪表图的值达到或超过该阈值时,颜色会发生变化。默认情况下,C3JS不支持动态更新color.threshold值,因为该值在图表初始化时被固定。

然而,可以通过重新渲染图表的方式来实现动态更新color.threshold值的效果。具体步骤如下:

  1. 定义一个初始的color.threshold值,并创建仪表图表。
  2. 当需要更新color.threshold值时,修改配置选项中的color.threshold属性。
  3. 销毁当前的仪表图表实例,使用新的配置选项重新创建仪表图表。

以下是一个示例代码:

代码语言:txt
复制
// 初始的color.threshold值
var initialThreshold = 50;

// 创建仪表图表
var chart = c3.generate({
  data: {
    columns: [
      ['data', 30]
    ],
    type: 'gauge'
  },
  gauge: {
    label: {
      format: function(value, ratio) {
        return value;
      },
      show: true // 显示数值标签
    },
    min: 0,
    max: 100,
    units: 'value'
  },
  color: {
    pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // 颜色范围
    threshold: {
      values: [initialThreshold] // 初始的color.threshold值
    }
  }
});

// 当需要更新color.threshold值时
function updateThreshold(newThreshold) {
  // 修改配置选项中的color.threshold属性
  chart.internal.config.color_threshold_values = [newThreshold];

  // 销毁当前的仪表图表实例
  chart.destroy();

  // 使用新的配置选项重新创建仪表图表
  chart = c3.generate(chart.internal.config);
}

// 示例调用
updateThreshold(70); // 更新color.threshold值为70

在上述示例中,我们通过updateThreshold函数来更新color.threshold值。调用updateThreshold(70)后,color.threshold值被更新为70,并重新渲染了仪表图表。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 歪门邪道性能优化:魔改三方库源码,性能提高几十倍!

    .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{line-height:1.5;margin-top:35px;margin-bottom:10px;padding-bottom:5px}.markdown-body h1{font-size:30px;margin-bottom:5px}.markdown-body h2{padding-bottom:12px;font-size:24px;border-bottom:1px solid #ececec}.markdown-body h3{font-size:18px;padding-bottom:0}.markdown-body h4{font-size:16px}.markdown-body h5{font-size:15px}.markdown-body h6{margin-top:5px}.markdown-body p{line-height:inherit;margin-top:22px;margin-bottom:22px}.markdown-body img{max-width:100%}.markdown-body hr{border:none;border-top:1px solid #ddd;margin-top:32px;margin-bottom:32px}.markdown-body code{word-break:break-word;border-radius:2px;overflow-x:auto;background-color:#fff5f5;color:#ff502c;font-size:.87em;padding:.065em .4em}.markdown-body code,.markdown-body pre{font-family:Menlo,Monaco,Consolas,Courier New,monospace}.markdown-body pre{overflow:auto;position:relative;line-height:1.75}.markdown-body pre>code{font-size:12px;padding:15px 12px;margin:0;word-break:normal;display:block;overflow-x:auto;color:#333;background:#f8f8f8}.markdown-body a{text-decoration:none;color:#0269c8;border-bottom:1px solid #d1e9ff}.markdown-body a:active,.markdown-body a:hover{color:#275b8c}.markdown-body table{display:inline-block!important;font-size:12px;width:auto;max-width:100%;overflow:auto;border:1px solid #f6f6f6}.markdown-body thead{background:#f6f6f6;color:#000;text-align:left}.markdown-body tr:nth-child(2n){background-color:#fcfcfc}.markdown-body td,.markdown-body th{padding:12px 7px;line-height:24px}.markdown-body td{min-width:120px}.markdown-body blockquote{color:#666;padding:1px 23px;margin:22px 0;border-left:4px solid #cbcbcb;background-color:#f8f8f8}.markdown-body blockquote:after{display:block;content:""}.markdown-body blockquote>p{margin:10px 0}.markdown-body ol,.markdown-body ul{padding-left:28px}.markdown-body ol li,.markdown-body

    02

    制作一个基于Chrome内核的Wincc Web控件

    随着当今计算机网络技术的发展,Web技术由于其良好的跨平台特性,其对于更新迭代较慢的工控行业的影响也越来越大。包括西门子在内的工业自动化巨头都将Web技术融入到自身最新控制系统中: WinCC Unified PCS7 neo等。但是在传统的SCADA系统中,往往对于最新的Web技术的兼容性不够理想。例如西门子公司的Wincc软件,由于强大的功能和可扩展性,在工控行业应用广泛,笔者在最近的项目中就遇到一个问题,因为某品牌称重模块的参数设置和校准是通Web页面来实现的,但是在用Wincc的WebBrowser Control控件时经常会遇到一个问题,那就是新打开网页的时候经常会报浏览器脚本执行错误,客户不接受系统有报错显示,所以必须想办法给予解决。通过查询相关资料得知,Wincc的WebBrowser Control控件因为采用的旧的IE内核的原因,对于JS脚本兼容性不够好。

    02

    PDMS PipelineTool 0.9.3版发布

    0.9.3版本主要是重构了螺栓材料统计功能,以sample项目的测试结果为例,螺栓统计的规格和数量与PDMS出的ISO图上标注的螺栓数据一致,有两根不一致的Branch我单独做了说明,我认为按照我的方法计算也是合理的。我本以为螺栓这么一点小东西应该很容易吧,没想到计算起来真是复杂,而且元件属性的订制必须也要符合一致的命名和设置规范,没有统一规范,工具就没有没有办法基于一个标准的计算规则来统计材料,为此我增加了很多元件属性的检查。开发过程经历了三次推倒重来,也算经历了一番波折,最后总算是八九不离十了。因为sample项目的数据量小,材料类别少,所以还有一些判断规则后期需要扩充,以后再说。

    01
    领券