Dimplejs 错误。当系列不为空时，行不显示答案

【问题标题】：Dimplejs Bug. Line does not show up when series is not nullDimplejs 错误。当系列不为空时，行不显示
【发布时间】：2014-09-21 16:11:35
【问题描述】：

我已经设置了一个 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]
                ];
            };

我用错误/问题创建了这个小提琴。有人可以告诉我如何在没有控制台错误的情况下显示彩色线条。希望你能帮忙。

这是我的小提琴：

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

【问题讨论】：

标签： javascript jquery d3.js data-visualization dimple.js

【解决方案1】：

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

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

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/

【讨论】：

谢谢约翰！效果很好！喜欢图表库！

【解决方案2】：

我找到了一个更简单的解决方法，您可以调用 addseries() 两次，一次使用包含工具提示字段和真实字段的字段数组，第二次仅使用真实类别字段。调用顺序对于获取线路和额外工具提示都很重要：

myChart.addSeries("Sex", dimple.plot.line);

myChart.addSeries(["Count Survived","Group Count","Sex"], dimple.plot.line)

【讨论】：