0

我正在测试使用 d3.js 库（http://tenxer.github.com/xcharts）的 xCharts，但是当我尝试在我的网站和 jsfiddle 上呈现图表时，文本是模糊的。您可以在下面看到它看起来有何不同。

http://jsfiddle.net/JsPxx/

这是我正在使用的代码。

 (function () {

      var data = {
  "xScale": "ordinal",
  "yScale": "linear",
  "main": [
    {
      "className": ".pizza",
      "data": [
        {
          "x": "Pepperoni",
          "y": 4
        },
        {
          "x": "Cheese",
          "y": 8
        }
      ]
    }
  ]
};
      var myChart = new xChart('bar', data, '#myChart');

    }());

任何关于为什么它看起来不像它应该的方式的帮助（如http://tenxer.github.com/xcharts）将不胜感激/

4

2 回答 2

2

两个问题：

  1. 轴的刻度线正在消除锯齿，因此它们显示为两个像素宽。通过添加shape-rendering:crispEdges到轴的 CSS 类——或者添加到整个图表，如果你愿意的话——你可以禁用抗锯齿。您可以在Scott Murray的这篇精彩教程中了解更多信息。

  2. The text seems to have a stroke applied to it (it may be coming from your code or from your css, or from defaults). Giving it CSS stroke: none is one way to take care of it.

于 2013-03-31T03:00:10.230 回答
2

in xchart.css find .xchart .axis text selector and add stroke-width: 0; rule

于 2013-05-17T10:27:20.953 回答