Question

我的代码如下。我已经附上了两个明确的问题。我只是希望Y轴数据像5,10,15,20,25一样硬编码，数据在图中正确表示。

Trail 1：如果我使用addAxis for Y. 1.数据显示正确但是y轴的刻度并不是必需的。

Trail 2：如果我为Y添加addCategoryAxis 1.数据没有正确显示 2. y轴刻度不是必需的。我需要在每个刻度之间有5个间隔。

有没有办法解决这个问题？我错过了什么吗？

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<div id="chartContainer">
      <script src="http://d3js.org/d3.v3.min.js"></script>
      <script src="http://dimplejs.org/dist/dimple.v2.1.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
      var svg = dimple.newSvg("#chartContainer", 800, 400);

      var data = [
    {
        "Type": "Type1",
        "Range": 128000,
        "Price": 20
    },
    {
        "Type": "Type1",
        "Range": 128000,
        "Price": 18
    },
    {
        "Type": "Type1",
        "Range": 145000,
        "Price": 21
    },
    {
        "Type": "Type2",
        "Range": 129000,
        "Price": 20
    },
    {
        "Type": "Type2",
        "Range": 145000,
        "Price": 21
    },
    {
        "Type": "Type2",
        "Range": 195000,
        "Price": 17
    }
];

      var chart = new dimple.chart(svg, data);
      chart.setBounds(60,20,680,330);
      var x = chart.addCategoryAxis("x", "Range");
      var y1 = chart.addAxis("y", "Price");
      y1.ticks = 5;

      var lines = chart.addSeries("Type", dimple.plot.line, [x,y1]);
      lines.lineMarkers = true;
      x.addOrderRule("Tyre");
      chart.addLegend(60, 5, 680, 10, "right", lines);
      chart.draw();



  </script>
</div>
</html>

Answer 1

您是否尝试过使用tickValues function？

您可以使用它来指定刻度的精确值：

yAxis.tickValues(d3.range(0, 25, 5));

凹坑绘制聚合值数据，这是错误的

1 个答案: