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]
                ];
            };

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

这是我的小提琴：

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

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

Answer 2

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

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

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

Dimplejs Bug。当系列不为空时，行不会显示

2 个答案: