小编jlb*_*ggs的帖子

我有一个在d3.js中建立的折线图.我需要一些自定义的帮助.我希望将x轴文本标签分成两行.我希望日期在一行,而月份在另一行.

目前的图表在一行中有"十二月十四日".

目前的图表:

x轴标签在此处分为2行.日期和月份分为2个不同的行.

预期的x轴:

Codepen链接

        var xScale = d3.time.scale().domain([data[0][xkeyVal], data[data.length - 1][xkeyVal]]).range([margin.left, width]);

        var yScale = d3.scale.linear().domain([0, d3.max(data, function(d) {
                    return d[ykeyVal];
                })]).range([height, margin.left]);

       var xAxisGen = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(_config.keys.xAxis.ticks)
                    .tickFormat(d3.time.format("%d %b")) 
                    .tickSize(0);

        var yAxisGen = d3.svg.axis()
              .scale(yScale)
              .orient("left")
              .tickValues(_config.keys.yAxis.tickValues.length > 0 ? _config.keys.yAxis.tickValues : 1)
        .tickSize(0);

基于此线程中的信息:实现自己的状态 - INACTIVE_STATE？

我已经建立了一个符合我需求的图表 - jsfiddle

我添加了一些自定义控件,允许用户显示/隐藏所有系列并检查/取消选中所有系列.

一切都很好.

我想要做的最后一部分是允许用户使用原始选项重置图表.

这部分我也开始工作,但是有一个问题:一旦图表重建,允许用户显示/隐藏/检查/取消选中的功能不再起作用,因为我已经销毁并重新指定了它们运行的​​变量的.

所以我的问题 -

1. 这是破坏和重建图表的正确方法,还是有更好的方法？
2. 如果这是这样做的话,那么如何让我的show/hide/check/uncheck函数继续工作呢？

重置图表的代码如下:

//reset the chart to original specs
$('#resetChart').click(function(){
    chart1.destroy();
    chart1 = new Highcharts.Chart(optionsChart1,highlightSer);
});

highlightSer 是一个回调功能,以突出某些系列.

以后不再起作用的代码示例:

var chart = chart1;
$('#showAll').click(function(){
        for(i=0; i < chart.series.length; i++) {
        chart.series[i].show();
    }
});

谢谢!

我有一个堆叠条形图,带有共享工具提示,我试图通过footerFormat属性将堆栈总数拉入工具提示.

我认为这将是一个我可以访问的简单属性,但我还没有找到适合它的选项.

我错过了一些明显的东西,还是我必须以更复杂的方式做到这一点？

(如果我错过了这个问题的副本,请告诉我,我无法找到我想要讨论的具体情况)

码:

tooltip : {
    shared          : true,
    useHTML         : true,
    headerFormat    : 
         '<table class="tip"><caption>Group {point.key}</caption>'
        +'<tbody>', 
    pointFormat     : 
         '<tr><th style="color: {series.color}">{series.name}: </th>'
        +'<td style="text-align: right">${point.y}</td></tr>',
    footerFormat    : 
         '<tr><th>Total: </th>'
        +'<td style="text-align:right"><b>${???}</b></td></tr>'
        +'</tbody></table>'
}

• 小提琴:http://jsfiddle.net/jlbriggs/AeLFZ/

我不仅希望我的图例包含系列的名称,我还希望它包含我的其他项目的名称,如我的情节.这是我的代码:

plotLines: [
    {
        color: 'red',
        dashStyle: 'shortdash',
        value: response.AverageTime,
        width: 2,
        label: {
            text: response.PlotLineName, 
            x: +10, 
            y: +30,
            rotation: 360,
            color: 'red'
        }
    }
]

所以我希望我的情节线的名称是"平均速度偏差",如下图所示.我怎样才能做到这一点？

我有一个复杂的区域图表,它使用了一些堆叠和一些未堆叠的系列.

在版本3之前,一切正常.在版本3中,有一些奇怪的错误行为,在firefox和chrome中:示例:http://jsfiddle.net/jlbriggs/yj3FP/

stacking:'normal',

如果我禁用堆叠,一切看起来都符合预期.但我需要堆叠.因此,如果您注释掉"堆叠:正常"行,您将看到应该是图表,除了堆叠部分...

在上面链接的示例中,如果隐藏除"预测"系列之外的所有区域系列,您将看到它们应该如何显示.请注意,与"预测"系列接壤的大粗线已经消失 - 它首先不应该存在!该线是所有其他堆叠系列,它们不沿x轴延伸到"预测"系列的区域,包裹并超过"预测"系列.

现在,隐藏了那些堆叠的区域系列,再次显示它们 - 注意线条扭曲和曲折的非常奇怪的方式....

我意识到这是一个复杂的解释.解释是很难的问题:)

所以问题是:

1)这里发生了什么？

2)如何让它停止？:)

github上的问题列为已解决,但我仍然对此图表存在完全相同的问题.

我发现了一些看似与我需要的相似的帖子,但似乎都没有解决我的问题.

我有一组包含数据数组的变量.例如:

var data1 = [1,2,3,4,5];

我在页面上的元素与id匹配这些变量名称.

<li id="data1">Data 1</li>

我希望能够单击该<li>元素,并调用关联的变量.如何通过单击id为data1的元素来使用变量data1？

作为一个基本的例子,假设我想提醒data1数组的内容.我从这样的事情开始:

$('li').click(function() {
   dataID = $(this).attr('id');

   alert( ...? ); // <- how do I get the contents of the variable data1 now that I know the clicked element's id was 'data1'?
});

我有一个图表,我有几个x轴plotLines和plotBands.我有一个函数,在legendItemClick上,将显示/隐藏plotLines和Bands.(它是一个直方图,正常曲线重叠,标记了stdev水平)

图表和代码可以在这里看到:http://jsfiddle.net/jlbriggs/FnhRV/

function toggleBands(chart) {
  $.each(chart.xAxis[0].plotLinesAndBands, function(index,el){
    if(el.svgElem != undefined) {
      el.svgElem[ el.visible ? 'show' : 'hide' ]();
      el.visible = !el.visible;
    }
  });
}

问题:当显示或隐藏其他系列,并且x轴相应缩放时,如果任何绘图线或条带从比例下降,则行为开始变得迟钝.

在发布的示例中,如果隐藏正常曲线系列,则最外面的绘图线将位于x轴的边界之外.一旦发生这种情况,每当您隐藏它们时,这两行将重新出现,并且单击各种图例项将导致不应该隐藏/可见的各种状态.

如果该系列对于绘图线始终保持足够宽,则不会发生此错误,并且显示和隐藏将按照预期快乐地发生.

谁能告诉我为什么会这样,和/或提供解决方案？提前致谢

杰米

{{edit:设置min和max以匹配曲线值对这种情况下的情况没有帮助,因为所需的可用性是用户可以隐藏曲线并查看缩放到直方图数据的图表.