Javascript Plottable.Plots.Rectangle创建宽度为0的矩形
我有以下数据:Javascript Plottable.Plots.Rectangle创建宽度为0的矩形,javascript,svg,plottable,Javascript,Svg,Plottable,我有以下数据: [{ "date": "2016-10-12T00:00:00.000Z", "parameter": "end_brick_temperature", "value": 61.3, "color": "green" }, { "date": "2016-10-12T00:00:00.000Z", "parameter": "percentage_of_expected_messages_received", "value"
[{
"date": "2016-10-12T00:00:00.000Z",
"parameter": "end_brick_temperature",
"value": 61.3,
"color": "green"
}, {
"date": "2016-10-12T00:00:00.000Z",
"parameter": "percentage_of_expected_messages_received",
"value": 99.6667,
"color": "green"
}, {
"date": "2016-10-12T00:00:00.000Z",
"parameter": "energy_used_kwh",
"value": 1.73418,
"color": "orange"
}, {
"date": "2016-10-12T08:00:00.000Z",
"parameter": "energy_used_kwh",
"value": 0.70354,
"color": "red"
}, {
"date": "2016-10-12T08:00:00.000Z",
"parameter": "end_brick_temperature",
"value": 57.7,
"color": "green"
}, {
"date": "2016-10-12T08:00:00.000Z",
"parameter": "percentage_of_expected_messages_received",
"value": 98.3333,
"color": "green"
}, {
"date": "2016-10-12T16:00:00.000Z",
"parameter": "percentage_of_expected_messages_received",
"value": 99.1667,
"color": "green"
}, {
"date": "2016-10-12T16:00:00.000Z",
"parameter": "energy_used_kwh",
"value": 0,
"color": "red"
}, {
"date": "2016-10-12T16:00:00.000Z",
"parameter": "end_brick_temperature",
"value": 42.2,
"color": "green"
}, {
"date": "2016-10-13T00:00:00.000Z",
"parameter": "energy_used_kwh",
"value": 1.73979,
"color": "orange"
}, {
"date": "2016-10-13T00:00:00.000Z",
"parameter": "end_brick_temperature",
"value": 66.2
}, {
"date": "2016-10-13T00:00:00.000Z",
"parameter": "percentage_of_expected_messages_received",
"value": 99.3333,
"color": "green"
}, {
"date": "2016-10-13T08:00:00.000Z",
"parameter": "end_brick_temperature",
"value": 59.8,
"color": "green"
}, {
"date": "2016-10-13T08:00:00.000Z",
"parameter": "energy_used_kwh",
"value": 0.711456,
"color": "red"
}, {
"date": "2016-10-13T08:00:00.000Z",
"parameter": "percentage_of_expected_messages_received",
"value": 98.3333,
"color": "green"
}]
我正在尝试使用Plottable.Plot.Rectangle创建热图,代码如下:
var xScale = new Plottable.Scales.Time().domain([data[0].date, data[data.length - 1].date]);
var xAxisDate = new Plottable.Axes.Time(xScale, "bottom");
var yScale = new Plottable.Scales.Category();
var yAxisParameters = new Plottable.Axes.Category(yScale, "left");
var plot = new Plottable.Plots.Rectangle()
.addDataset(new Plottable.Dataset(data))
.x(function (d) {
return d.date
}, xScale)
.y(function (d) {
return d.parameter
}, yScale)
.attr("fill", function (d) {
return d.color
});
var table = new Plottable.Components.Table([
[yAxisParameters, plot],
[null, xAxisDate]
]);
table.renderTo("svg#heatmap");
但是,它只是创建宽度为0的矩形,因此在x轴(日期)上有些东西不起作用:
似乎您必须指定.x2(),例如
似乎您必须指定.x2(),例如
<rect fill="green" width="0.0000028312475887345677"
x="-0.0000014156237943672838" height="81.66666666666667" y="0">
</rect>
.x2(function (d) {
return new Date().setHours(d.date.getHours() + 8);
}, xScale)