Question

我一直在玩新发布的version 2.0.0，我试图用一些简单的民意调查数据复制the composite axis example - 3个系列（是，否，不确定）对一个Y-轴。

我显然在某个地方犯了一个基本错误...基本原则是你定义一个y轴，然后每次想要在另一组数据上分层时将其作为参考传递，但它似乎没有将它们视为三个不同的系列（除了连接几个相同但不相邻的值的情况之外没有点之间的线，例如2002年和2004年的“否”30％，尽管两者之间存在不同的值）。

另外，根据注释掉的行，如果我尝试将x轴切换到Time，我会收到D3错误。

JSFiddle live example

pollData = [
    { Year : 2001, Yes: 50, No: 40, Unsure: 10 },
    { Year : 2002, Yes: 60, No: 30, Unsure: 10 },
    { Year : 2003, Yes: 65, No: 25, Unsure: 5 },
    { Year : 2004, Yes: 75, No: 30, Unsure: 4 },
    { Year : 2005, Yes: 80, No: 10, Unsure: 5 }
];

var svg = dimple.newSvg("#chartContainer", 590, 400);

var myChart = new dimple.chart(svg, pollData);

myChart.setBounds(75, 30, 490, 330)

// Why won't a time axis working...? ("undefined is not a function" in D3)
// var dateAxis = myChart.addTimeAxis("x", "Year", "%Y");

var dateAxis = myChart.addCategoryAxis("x", "Year");
dateAxis.addOrderRule("Year");

var yesAxis         = myChart.addMeasureAxis("y", "Yes");
var noAxis          = myChart.addMeasureAxis(yesAxis, "No");
var unsureAxis      = myChart.addMeasureAxis(yesAxis, "Unsure");

myChart.addSeries("Yes", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure", dimple.plot.line, [dateAxis, unsureAxis]);

yesAxis.title = '%';

myChart.draw();

Answer 1

这里的问题不在于你正确使用的复合轴。这是系列定义。 addSeries的第一个参数要么使用要分解的维度，要么使用不在数据中的字段（用作标签）。此方法的唯一限制是您无法通过数据中的维名称标记系列。在这种情况下，第一个系列例如（它适用于所有），由＆＃34;是＆＃34;分解。对于行系列，它意味着它试图为＆＃34;是＆＃34;的每个值绘制一条线，表示每行1行，因此所有单个未连接的点。修复方法是将您的行命名为不同的行。例如：

myChart.addSeries("Y", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("N", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("U", dimple.plot.line, [dateAxis, unsureAxis]);

这是您更新过的小提琴：http://jsfiddle.net/RawyW/2/

如果您希望名称看起来匹配，则只需在系列名称中添加一个尾随空格：

myChart.addSeries("Yes ", dimple.plot.line, [dateAxis, yesAxis]);
myChart.addSeries("No ", dimple.plot.line, [dateAxis, noAxis]);
myChart.addSeries("Unsure ", dimple.plot.line, [dateAxis, unsureAxis]);

这也可行

Dimple.js折线图与复合轴，系列上的点之间没有链接

1 个答案: