使用 javascript 绘制简单图表

Question

我需要用 javascript 重现以下图表：

红点当然是可变的

我尝试使用 flot 库：

var d3 = [[7,7]];

    $.plot("#placeholder", [{
        data: d3,
        points: { show: true }
    }], {
xaxis:
{
  min:-15, max: 15,  tickSize: 5
},

yaxis:
{
    min:-15, max: 15,  tickSize: 5
}
});

结果：

x轴没有居中... 我正在寻找一种更好的方法来优化它，就像我的第一张图片一样，js lib 可以做到这一点。谢谢

Answer 1

如果您正在寻找一个库，D3JS 拥有几乎所有人类已知的图形样式。

Answer 2

不仅仅是一个库，也许这对你有用？

HTML:

<div id="graph"></div>

CSS:

#graph
{
  margin; 0 auto;
}

.axis path,
.axis line {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

.axis text {
  font-family: sans-serif;
  font-size: 11px;
}

.tick line
{
  stroke: #59ADEB;
  opacity: 0.5;
}

g path.domain
{
  stroke: #4F4F4F;
}

JavaScript:

// Set graph
    var width = 700,
            height = 700,
            padding = 100;

    // create an svg container
    var vis = d3.select("#graph")
    .append("svg:svg")
        .attr("width", width)
        .attr("height", height);

    var xScale = d3.scale.linear().domain([10, -10]).range([width - padding, padding]);
    var yScale = d3.scale.linear().domain([-10, 10]).range([height - padding, padding]);

    // define the y axis
    var yAxis = d3.svg.axis()
            .orient("left")
            .scale(yScale);

    // define the y axis
    var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale);

    var xAxisPlot = vis.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + (height/2) + ")")
            .call(xAxis.tickSize(-height, 0, 0));

    var yAxisPlot = vis.append("g")
        .attr("class", "axis axis--y")
        .attr("transform", "translate("+ (width/2) +",0)")
        .call(yAxis.tickSize(-width, 0, 0));


    xAxisPlot.selectAll(".tick line")
        .attr("y1", (width - (2*padding))/2 * -1)
        .attr("y2", (width - (2*padding))/2 * 1);

    yAxisPlot.selectAll(".tick line")
        .attr("x1", (width - (2*padding))/2 * -1)
        .attr("x2", (width - (2*padding))/2 * 1);

https://jsfiddle.net/szx1eq99/
使用 d3 库。

使用 javascript 绘制简单图表

plot sipmle chart with javascript

html

javascript

charts

plot

draw