Question

我使用以下方法禁用了范围选择器中的小图： showInRangeSelector: false, 但是我收到了这样的警告信号：我似乎无法找到bug的位置。

更新了代码：

<html>
<head>
<link href="http://dygraphs.com/2.0.0/dygraph.css" rel="stylesheet"/>
<script src="http://dygraphs.com/2.0.0/dygraph.js"></script> 
<div id="hello" class="chart"></div>
</head>
<body>
<script type = "text/javascript">

var hello = [
            [new Date("2016-03-06"),[10,20,30],[11,11,11]],
            [new Date("2016-03-07"),[10,20,30],[15,15,15]],
            [new Date("2016-03-08"),[10,20,30],[32,32,32]],
            [new Date("2016-03-09"),[10,20,30],[18,18,18]],
            [new Date("2016-03-10"),[10,20,30],[26,26,26]],
            [new Date("2016-03-11"),[10,20,30],[31,31,31]],
            [new Date("2016-03-12"),[10,20,30],[9,9,9]],
        ],

a = new Dygraph(
    document.getElementById("hello"),hello, 
    {
        labels: [ "Date", "Mean" , "Scatter"],
        customBars: true,
        showRangeSelector: true,
        showInRangeSelector : false, 
        interactionModel: Dygraph.defaultInteractionModel,
        series: {
            "Mean" : {
                drawPoints: false,
                color: "#585858",
            },
            "Scatter" : {
                drawPoints: true,
                pointSize: 3,
                strokeWidth: 0,
            }
        },      
    }
);
</script>

谢谢：）

我必须添加额外的措辞，因为帖子主要是代码，我无法发布：P

Answer 1

这是我在想的解决方法。告诉我它是否对你有用。

这个想法是你可以只为rangeselector创建另一个系列。

此系列的数据无关紧要，因为它不会显示。但这取决于您希望看到范围选择器的方式。如果要查看范围选择器中的典型行，可以使用此第一个解决方案。

https://jsfiddle.net/b8sz6m36/4/

var hello = [
        [new Date("2016-03-06"),[10,20,30],[11,11,11],[1,1,1]],
        [new Date("2016-03-07"),[10,20,30],[15,15,15],[1,1,1]],
        [new Date("2016-03-08"),[10,20,30],[32,32,32],[1,1,1]],
        [new Date("2016-03-09"),[10,20,30],[18,18,18],[1,1,1]],
        [new Date("2016-03-10"),[10,20,30],[26,26,26],[1,1,1]],
        [new Date("2016-03-11"),[10,20,30],[31,31,31],[1,1,1]],
        [new Date("2016-03-12"),[10,20,30],[9,9,9],[1,1,1]],
    ],

a = new Dygraph(
document.getElementById("hello"),hello, 
{
    labels: [ "Date", "Mean" , "Scatter", "RangeSelector"],
    customBars: true,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
    series: {
        "Mean" : {
            drawPoints: false,
            color: "#585858",
                    showInRangeSelector : false, 
        },
        "Scatter" : {
            drawPoints: true,
            pointSize: 3,
            strokeWidth: 0,
                    showInRangeSelector : false, 
        },
        "RangeSelector" : {
            showInRangeSelector : true, 
        }
    },      
  }
);

如果让范围选择器完全为空并不重要，您可以使用第二种解决方案，其中范围选择器的系列数据更简单

https://jsfiddle.net/b8sz6m36/5/

var hello = [
        [new Date("2016-03-06"),[10,20,30],[11,11,11],0],
        [new Date("2016-03-07"),[10,20,30],[15,15,15],0],
        [new Date("2016-03-08"),[10,20,30],[32,32,32],0],
        [new Date("2016-03-09"),[10,20,30],[18,18,18],0],
        [new Date("2016-03-10"),[10,20,30],[26,26,26],0],
        [new Date("2016-03-11"),[10,20,30],[31,31,31],0],
        [new Date("2016-03-12"),[10,20,30],[9,9,9],0],
    ],

a = new Dygraph(
document.getElementById("hello"),hello, 
{
    labels: [ "Date", "Mean" , "Scatter", "RangeSelector"],
    customBars: true,
    showRangeSelector: true,
    interactionModel: Dygraph.defaultInteractionModel,
    series: {
        "Mean" : {
            drawPoints: false,
            color: "#585858",
                    showInRangeSelector : false, 
        },
        "Scatter" : {
            drawPoints: true,
            pointSize: 3,
            strokeWidth: 0,
                    showInRangeSelector : false, 
        },
        "RangeSelector" : {
            showInRangeSelector : true, 
        }
    },      
  }
);

Answer 2

showInRangeSelector选项必须针对图表的每个系列进行特定设置，而不是在常规选项中。尝试将系列选项中的该选项设置为false或true，具体取决于您是否希望特定系列显示在范围选择器中

a = new Dygraph(
    document.getElementById("hello"),hello, 
    {
        labels: [ "Date", "Mean" , "Scatter"],
        customBars: true,
        showRangeSelector: true,
        interactionModel: Dygraph.defaultInteractionModel,
        series: {
            "Mean" : {
                drawPoints: false,
                color: "#585858",
                showInRangeSelector : false
            },
            "Scatter" : {
                drawPoints: true,
                pointSize: 3,
                strokeWidth: 0,
                showInRangeSelector : true
            }
        },      
    }
);

Answer 3

我不清楚你为什么要这样做，但也许这是一个解决方案。在创建dygraph之前，您必须考虑预处理信息。这样，只有在要显示任何系列时，才能显示范围选择器。

var showMeanInRangeSelector = false; // or true
var showScatterInRangeSelector = false; // or true
var rangeSelectorVisible = showMeanInRangeSelector || showScatterInRangeSelector;

a = new Dygraph(document.getElementById("hello"),hello, 
  {
    labels: [ "Date", "Mean" , "Scatter"],
    customBars: true,
    showRangeSelector: rangeSelectorVisible,
    interactionModel: Dygraph.defaultInteractionModel,
    series: {
        "Mean" : {
            drawPoints: false,
            color: "#585858",
            showInRangeSelector : showMeanInRangeSelector
        },
        "Scatter" : {
            drawPoints: true,
            pointSize: 3,
            strokeWidth: 0,
            showInRangeSelector : showScatterInRangeSelector
        }
    },      
  }
);

DYGRAPHS：在范围选择器中禁用小图时显示警告

3 个答案: