Question

我正在将我纯粹使用PHP制作的网站重写为直接的Javascript实现。我将所有的dygraphs代码都移了过来，图表似乎没有显示你正在徘徊的价值。我能想到的唯一不同的是，在之前的版本中，我使用了一个PHP数组，从中创建了一个字符串，并将其回显到我的dygraph数据声明中的一个标记中。在新版本中，我正在使用本机数组调用来获取数据。格式化程序可能会搞砸了吗？图表本身会显示出来，因此数据似乎正在运行。

我还注意到，尽管代码相同，但是dygraphs标题和轴标签没有出现在新标签中。

旧实施：

g = new Dygraph(
document.getElementById("graphdiv"),    
[[],[],[]....],   //The whole array declaration couldn't be pasted here. Too big. 
    {

    labels: labels.slice(),
    title: 'cFIREsim Simulation Cycles',
    ylabel: 'Portfolio ($)',
    xlabel: 'Year',
    labelsDivStyles: { 'textAlign': 'right' },
    labelsDivWidth: 500,
    labelsDiv: 'labelsdiv',
    digitsAfterDecimal: 0,
    yAxisLabelWidth: 100,
    axes: {
        y: {
                labelsKMB: false,
                maxNumberWidth: 11,
                valueFormatter: function numberWithCommas(x) {
                    return 'Portfolio: $' + x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                },
                axisLabelFormatter: function numberWithCommas(x) {
                    return '$' + x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                }
        },
        x: {
            valueFormatter: function numberWithCommas(x) {
                    return 'Selected Year: ' + x;
                },
        },
    },
    showLabelsOnHighlight: true,
    highlightCircleSize: 3,
    strokeWidth: 1.5,
    strokeBorderWidth: 0,
 highlightSeriesBackgroundAlpha: 1.0,
    highlightSeriesOpts: {
      strokeWidth: 4,
      strokeBorderWidth: 2,
      highlightCircleSize: 5,
    },
}
);

新实施：

Simulation.g.push(new Dygraph(
        // containing div
        document.getElementById("graph" + Simulation.tabs), //graph div has dynamic name for multiple graphs.
        chartData, {
            labels: labels.slice(),
            title: 'cFIREsim Simulation Cycles',
            ylabel: 'Portfolio ($)',
            xlabel: 'Year',
            labelsDivStyles: {
                'textAlign': 'right'
            },
            labelsDivWidth: 500,
            labelsDiv: 'labels' + this.tabs, //same dynamic names as graphdiv
            digitsAfterDecimal: 0,
            axes: {
                y: {
                    axisLabelWidth: 100,
                    labelsKMB: false,
                    maxNumberWidth: 11,
                    valueFormatter: function numberWithCommas(x) {
                        return 'Spending: $' + x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    },
                    axisLabelFormatter: function numberWithCommas(x) {
                        return '$' + x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                    }
                },
                x: {
                    valueFormatter: function numberWithCommas(x) {
                        return 'Year: ' + x;
                    },
                },
            },
            showLabelsOnHighlight: true,
            highlightCircleSize: 3,
            strokeWidth: 1.5,
            strokeBorderWidth: 0,
            highlightSeriesBackgroundAlpha: 1.0,
            highlightSeriesOpts: {
                strokeWidth: 4,
                strokeBorderWidth: 2,
                highlightCircleSize: 5,
            },
        }
    ));

Answer 1

这最终成为一个愚蠢的CSS问题。标签div需要一个CSS类，这样我才能在黑色背景上看到标签。

Dygraphs没有显示价值

1 个答案: