javascript - 酒窝 bug 。当系列不为空时，行不显示

Question

我设置了一个 dimplejs.org 折线图。我应该能够将点击次数从蓝色变为红色(点击次数越少，线条为蓝色，点击次数越多，线条使用从蓝色到红色的渐变)。

如果我将系列设置为如下所示，则效果很好；但是工具提示仅包含 x 和 y 点(周和点击数)。我需要工具提示来包含月份。

var mySeries = myChart.addSeries(null, dimple.plot.line);

如果我修改该系列(按照 dimplejs.org 上的其他示例并如下所示)以包含数组中的所有字段，该行就会消失，并且在控制台中出现渐变错误。

var mySeries = myChart.addSeries(["Month","Week","Clicks"],dimple.plot.line);

我已经尝试过这个工具提示；但这没有帮助:

mySeries.getTooltipText = function (e) {
                return [
                    "Month: " + e.aggField[0],
                    "Week in the year: " + e.aggField[1],
                    "Clicks in the week: " + e.aggField[2]
                ];
            };

我已经用这个错误/问题创建了这个 fiddle 。有人可以告诉我如何显示彩色线条并且没有控制台错误。希望您能帮忙。

这是我的 fiddle :

http://jsfiddle.net/eformx/beL2bwa3/

Answer 1

渐变线似乎确实存在一些问题，它只适用于简单的情况。我认为它实际上无法在不同的轴类型上工作，因此我可能会从 future 的版本中删除该功能。逻辑取决于类别与度量轴。如果可以适合您的情况，那么您就可以实现您想要的。

您链接到的 fiddle 中的数据似乎与您的问题不太相符，但您可以实现如下所述的效果。由于渐变线的限制，您需要使用测量轴和类别轴，然后使用自定义工具提示方法放入数据:

var svg = dimple.newSvg("body", 800, 600);

var data = [
    { "Month" : "Jan", "Week" : "2014-01-20", "Clicks" : "10"},
    { "Month" : "Jan", "Week" : "2014-01-27", "Clicks" : "4"},
    { "Month" : "Feb", "Week" : "2014-02-03", "Clicks" : "35"},
    { "Month" : "Feb", "Week" : "2014-02-10", "Clicks" : "46"},
    { "Month" : "Feb", "Week" : "2014-02-17", "Clicks" : "34"},
    { "Month" : "Feb", "Week" : "2014-02-24", "Clicks" : "26"},
    { "Month" : "Mar", "Week" : "2014-03-03", "Clicks" : "12"}
];

var chart = new dimple.chart(svg, data);

chart.addCategoryAxis("x", "Week");
chart.addMeasureAxis("y", "Clicks");
chart.addColorAxis("Clicks", ["blue", "red"]);
var s = chart.addSeries(null, dimple.plot.line);

s.getTooltipText = function(e) {
    var i,
        row;
    for (i = 0; i < data.length; i += 1) {
        row = data[i];
        if (row.Week === e.xField[0]) {
            return [
                "Month: " + row.Month,
                "Week in the year: " + row.Week,
                "Clicks in the week: " + e.yValue
            ];
        }
    }
};

s.lineWeight = 5;
s.lineMarkers = true;

chart.draw();

http://jsfiddle.net/beL2bwa3/3/