我想在Dimple JS散点图上绘制水平平均线。我试图从这里遵循解决方案。我不知道问题是什么。有什么建议么?您的帮助将不胜感激。
var svg = dimple.newSvg("#ChartContainer", 800, 600);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 50, 600, 500)
myChart.addMeasureAxis("x", "ESCIndex");
myChart.addMeasureAxis("y", "Grade");
var s=myChart.addSeries(["OECD"], dimple.plot.bubble);
var myLegend=myChart.addLegend(10, 10, 400, 30, "right", s);
var s1 = myChart.addSeries("Average", dimple.plot.line);
s1.data = [
{ "Average" : "avg", "Grade" : 13.22, "ESCIndex" : -10.45 },
{ "Average" : "avg", "Grade" : 13.22, "ESCIndex" : 6.79 }
];
myChart.assignColor("Average", "green");
myChart.draw();
基于此处的解决方案。
我将代码更改为以下:
var svg = dimple.newSvg("#ChartContainer", 800, 600);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 50, 600, 500)
myChart.addMeasureAxis("x", "ESCIndex");
myChart.addMeasureAxis("y", "Grade");
myChart.addSeries(["OECD"], dimple.plot.bubble);
var myLegend=myChart.addLegend(10, 10, 400, 30, "right");
myChart.draw();
svg.append("line")
.attr("x1", myChart._xPixels())
.attr("x2", myChart._xPixels() + myChart._widthPixels())
.attr("y1", 527.967)
.attr("y2", 527.967)
.style("stroke", "green");
然后解决问题。
注意:
527.967≈(600-500)/2 500 - (13.22 *500)/(50 *6)
- 600:SVG高度
- 500:图表高度
- 13.22(目标值):平均等级,Y轴
- 50:y轴上的刻度标记之间的间隔
- 6:y轴的刻度间隔总数
没有直接的方法可以在Dimple图中添加平均线,但是我们可以向其添加n个系列数量,因此一旦您添加了所需的可视化栏,区域,线路,线路等。将另一个类似Averageline系列的添加到您的代码中。该系列只能有两个数据点,datapoint1 = {键:yourdata [1] .key,value:pasemutValue},datapoint2 = {key:yourdata [last] .key,value,value:falueverValue}
var svg = dimple.newSvg("#chartContainer", 600, 400),
data = [
{ "Value" : 100, "Year" : 2009 , "sample": "0"},
{ "Value" : 40, "Year" : 2010 , "sample": "0"},
{ "Value" : 60, "Year" : 2011 , "sample": "0"},
{ "Value" : 10, "Year" : 2012 , "sample": "0"},
{ "Value" : 80, "Year" : 2013 , "sample": "0"},
{ "Value" : 20, "Year" : 2014 , "sample": "0"}
];
// Draw a standard chart using the aggregated data
var chart = new dimple.chart(svg, data);
var x = chart.addCategoryAxis("x", "Year");
var y = chart.addMeasureAxis("y", "Value");
y.hidden = true;
var s = chart.addSeries('channel', dimple.plot.bar);
let horizontalLine = chart.addSeries("Average", dimple.plot.line);
chart.assignColor("Average","black");
horizontalLine.data = [];
for (let i = 0; i < 2; i++) {
let obj = {};
obj["Year"] = i ? data[0]["Year"] : data[data.length-1]["Year"];
obj["Value"] =50;
horizontalLine.data.push(obj);
}
chart.draw();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.js"></script>
<div id="chartContainer"></div>