我设置了一个 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 :
最佳答案
渐变线似乎确实存在一些问题,它只适用于简单的情况。我认为它实际上无法在不同的轴类型上工作,因此我可能会从 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();
关于javascript - 酒窝 bug 。当系列不为空时,行不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25961163/