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

Question

我使用以下方法禁用了范围选择器中的小图形： showInRangeSelector: false, 但我收到这样的警告标志：我似乎找不到错误在哪里。

更新代码：

<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>

谢谢:)

我必须添加额外的措辞，因为 post 主要是代码，我不能 post :P

Answer 1

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 2

我不太明白你为什么要这样做，但也许这是一个解决方案。在创建 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
        }
    },      
  }
);

Answer 3

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

想法是您可以只为范围选择器创建另一个系列。

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

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, 
        }
    },      
  }
);

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

DYGRAPHS: Show warning when disable small graph in range selector

javascript

dygraphs