Question

我使用canvas js库创建了一个图表但我在图表上显示网格线时遇到问题

＆＃13;

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title: {
        text: "Axis Y with interval 20"
      },
      axisY:{
        logarithmic : true,
        gridthickness : 1,
        minimum : 10,
        maximum : 101,
     },
      data: [
      {
        type: "line",
        dataPoints: [
        { x: 100, y: 71 },
        { x: 200, y: 55},
        { x: 300, y: 50 },
        { x: 400, y: 65 },
        { x: 500, y: 95 },
        { x: 600, y: 68 },
        { x: 700, y: 28 },
        { x: 800, y: 34 },
        { x: 900, y: 14}
        ]
      }
      ]
    });

    chart.render();
  }
  </script>
  <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>
</html>

＆＃13;

this is how i wanted the grid to be

this is how it looks now

任何人都知道如何正确格式化网格线，我还添加了演示剪辑我的数据的样子

Answer 1

目前无法使用小网格。但是，通过添加stripLines，您可以实现与下面所示相同的操作。

＆＃13;

var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "Axis Y with interval 10"
  },
  axisY: {
    logarithmic: true,
    gridThickness: 0,
    tickThickness: 0,
    labelFormatter: function(e) {
      return ""
    },
    minimum: 10,
    maximum: 101,
  },
  data: [{
    type: "line",
    dataPoints: [
    	{ x: 100, y: 71 },
      { x: 200, y: 55},
      { x: 300, y: 50 },
      { x: 400, y: 65 },
      { x: 500, y: 95 },
      { x: 600, y: 68 },
      { x: 700, y: 28 },
      { x: 800, y: 34 },
      { x: 900, y: 14}
    ]
  }]
});

chart.render();
addStripLines(chart);

function addStripLines(chart) {
  var stripLines = [];

  for (var i = chart.axisY[0].minimum; i < chart.axisY[0].maximum;
    (i += 10)) {
    chart.axisY[0].addTo("stripLines", {
      value: i,
      label: i,
      labelPlacement: "outside",
      labelBackgroundColor: "transparent",
      labelFontColor: "black",
      color: "black"
    });
  }
}

＆＃13;

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

＆＃13;

使用Canvas js对数图绘制网格线

1 个答案: