热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

dygraph-如何更改条形图的系列名称。-dygraph-howtochangeseriesnamesforbarchart

Ihaveabarchartwith3series,butIcantchangetheirnames,Ihaveonlyy1y2y2,notmyownna

I have a bar chart with 3 series, but I cant change their names, I have only y1 y2 y2, not my own names from the code. As per example bar chartI see, that I should use Multi-columnBarChart, but how can I do that? here is comment from example Multi-columnBarChart:

我有一个有3个系列的条形图,但是我不能改变它们的名字,我只有y1 y2 y2,不是我自己的名字。就像bar chartI看到的,我应该使用多列条形图,但是我怎么做呢?下面是示例多柱条形图的注释:

function multiColumnBarPlotter(e) {
  // We need to handle all the series simultaneously.
  if (e.seriesIndex !== 0) return;

  var g = e.dygraph;
  var ctx = e.drawingContext;
  var sets = e.allSeriesPoints;
  var y_bottom = e.dygraph.toDomYCoord(0);

  // Find the minimum separation between x-values.
  // This determines the bar width.
  var min_sep = Infinity;
  for (var j = 0; j 

here is my code:

这是我的代码:

function barChartPlotter(e) {
    var ctx = e.drawingContext;
    var points = e.points;
    var y_bottom = e.dygraph.toDomYCoord(0);

    // The RGBColorParser class is provided by rgbcolor.js, which is
    // packed in with dygraphs.
    var color = new RGBColorParser(e.color);
    color.r = Math.floor((255 + color.r) / 2);
    color.g = Math.floor((255 + color.g) / 2);
    color.b = Math.floor((255 + color.b) / 2);
    ctx.fillStyle = color.toRGB();

    // Find the minimum separation between x-values.
    // This determines the bar width.
    var min_sep = Infinity;
    for (var i = 1; i ";
        window.open('../RUNNER/_VLOGS/launch' + p.xval + '.html','_blank');
        window.open('../RUNNER/_LOGS/launch_log' + p.xval + '.txt','_blank');
                },
    //drawPoints: true,
    //drawXGrid: false,
    //drawYGrid: false,
    //fillGraph: true

    }
);

g.ready(function() {
    g.setAnnotations([
    {

    }]);
});

1 个解决方案

#1


1  

For multiple series, you need to get allSeriesPoints instead of just points. Here is an example I put together for another SO question:

对于多个级数,您需要获得所有的级数点而不仅仅是点。下面是我为另一个问题整理的一个例子:

Here is a working DEMO at jsFiddle.com

这是jsFiddle.com上的一个工作演示

The plotter code looks like this:

绘图仪代码如下:

function multiColumnBarPlotter(e) {
  // We need to handle all the series simultaneously.
  if (e.seriesIndex !== 0) return;

  var g = e.dygraph;
  var ctx = e.drawingContext;
  var sets = e.allSeriesPoints;
  var y_bottom = e.dygraph.toDomYCoord(0);

  // Find the minimum separation between x-values.
  // This determines the bar width.
  var min_sep = Infinity;
  for (var j = 0; j 

I then create 2 charts of the same data, one using CSV and the other an array. The CSV provides labels directly in the data, for the array, you can change labels with the labels property:

然后创建两个相同数据的图表,一个使用CSV,另一个使用数组。CSV在数据中直接提供标签,对于数组,您可以使用标签属性更改标签:

labels: ['x', 'series1', 'series2', 'series3'],

The whole chart code would then be

整个图表代码将会是

g2 = new Dygraph(document.getElementById("g_div2"),
                 theData,
                   {
                     // options go here. See http://dygraphs.com/options.html
                     legend: 'always',
                     labels: ['x', 'series1', 'series2', 'series3'],
                     animatedZooms: true,
                     plotter: multiColumnBarPlotter,
                     colors: ["#00A0B0", "#6A4A3C", "#CC333F", ],
                     dateWindow: [0, 8]
                 });

推荐阅读
  • UNP 第9章:主机名与地址转换
    本章探讨了用于在主机名和数值地址之间进行转换的函数,如gethostbyname和gethostbyaddr。此外,还介绍了getservbyname和getservbyport函数,用于在服务器名和端口号之间进行转换。 ... [详细]
  • 在前两篇文章中,我们探讨了 ControllerDescriptor 和 ActionDescriptor 这两个描述对象,分别对应控制器和操作方法。本文将基于 MVC3 源码进一步分析 ParameterDescriptor,即用于描述 Action 方法参数的对象,并详细介绍其工作原理。 ... [详细]
  • 本教程涵盖OpenGL基础操作及直线光栅化技术,包括点的绘制、简单图形绘制、直线绘制以及DDA和中点画线算法。通过逐步实践,帮助读者掌握OpenGL的基本使用方法。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 本文介绍如何使用Objective-C结合dispatch库进行并发编程,以提高素数计数任务的效率。通过对比纯C代码与引入并发机制后的代码,展示dispatch库的强大功能。 ... [详细]
  • 本文详细介绍了 Dockerfile 的编写方法及其在网络配置中的应用,涵盖基础指令、镜像构建与发布流程,并深入探讨了 Docker 的默认网络、容器互联及自定义网络的实现。 ... [详细]
  • 本文详细介绍了Akka中的BackoffSupervisor机制,探讨其在处理持久化失败和Actor重启时的应用。通过具体示例,展示了如何配置和使用BackoffSupervisor以实现更细粒度的异常处理。 ... [详细]
  • Android 渐变圆环加载控件实现
    本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件,该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]
  • 本文详细介绍了Java中org.w3c.dom.Text类的splitText()方法,通过多个代码示例展示了其实际应用。该方法用于将文本节点在指定位置拆分为两个节点,并保持在文档树中。 ... [详细]
  • 使用Vultr云服务器和Namesilo域名搭建个人网站
    本文详细介绍了如何通过Vultr云服务器和Namesilo域名搭建一个功能齐全的个人网站,包括购买、配置服务器以及绑定域名的具体步骤。文章还提供了详细的命令行操作指南,帮助读者顺利完成建站过程。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 题目Link题目学习link1题目学习link2题目学习link3%%%受益匪浅!-----&# ... [详细]
  • 本文详细探讨了VxWorks操作系统中双向链表和环形缓冲区的实现原理及使用方法,通过具体示例代码加深理解。 ... [详细]
  • 本文介绍了如何通过扩展 UnityGUI 创建自定义和复合控件,以满足特定的用户界面需求。内容涵盖简单和静态复合控件的实现,并展示了如何创建复杂的 RGB 滑块。 ... [详细]
  • 本文详细介绍了如何在ECharts中使用线性渐变色,通过echarts.graphic.LinearGradient方法实现。文章不仅提供了完整的代码示例,还解释了各个参数的具体含义及其应用场景。 ... [详细]
author-avatar
金婉山_461
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有