Question

我今天正在制作一张图表 - 测试它 - 我在想是否有可能只显示图表一侧的整个单位？（比如1 2 3 4 5 6 7 8 9，依此类推......）我正在使用ChartJS

这是一个屏幕：

（单位在左边，靠近＆＃34;值＆＃34;）

PS：请原谅我糟糕的英语，我是法国人。

Answer 1

您可以传入选项以覆盖比例

...
scaleOverride: true,
scaleSteps: 10,
scaleStepWidth: 1,
scaleStartValue: 0,
...

小提琴 - http://jsfiddle.net/3kvb8ycy/

如果您不知道数据的上限，那么您可以在初始化图表并设置它（无聊:-)）之前计算上述内容，或者在您将比例标签格式化为当您没有整数时显示比例标签

new Chart(ctx).Line(data, {
  integersOnly: true,
  scaleLabel: function(d) {
    if (parseInt(d.value) === Number(d.value))
      return d.value
    else
      return '';
  }
});

几乎涵盖了大多数情况，除非您的所有值都低于1而且没有一个接近于1 - 在这种情况下，您不会看到任何比例标签。

现在你可以简单地在你的数据数组末尾添加一个额外的值（即没有相应的标签，这将迫使比例增加到1），但这会在最后一行之后拉出一行（a位）。这就是它的样子

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [0.65, 0.2, 0.80, 0.81, 0.56, 0.55, 0.8, 1]
        }
    ]
};

小提琴 - http://jsfiddle.net/wufLjajg/

但我们可以做得更好，只需将这个虚拟点移动到虚拟系列，并用null填充系列的其余部分（Chart.js不绘制空值，也不在工具提示中显示）

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [0.65, 0.2, 0.80, 0.81, 0.56, 0.55, 0.8]
        },
        {
            data: [null, null, null, null, null, null, null, 1]
        }
    ]
};

然后你就是黄金（因为最后一点不在你赢得的图表上，甚至看不到它的工具提示）。

小提琴 - http://jsfiddle.net/kzaxtmdq/

Answer 2

我也有这个问题，但是当我查看chartjs的代码时，我可以理解发生了什么，它发生了，因为数据集中的最小值和最大值仅在数据集的某个值大于1的情况下才会显示为1只是整数部分，请参阅代码段：

var lineChartData1 = {
    "datasets": [{
        "data": [
            "0.5",
            "0.2",
            "0.9",
            "0.4",
            "0.3",
            "0.2",
            "0.5",
            "0.7",
            "0.5",
            "1"],
            "pointStrokeColor": "#fff",
            "fillColor": "rgba(155,220,220,0.5)",
            "pointColor": "rgba(155,220,220,1)",
            "strokeColor": "rgba(155,220,220,1)"
    }],
        "labels": [
        "2013-01-01",
        "2013-01-04",
        "2013-01-15",
        "2013-02-03",
        "2013-03-25",
        "2013-04-03",
        "2013-04-14",
        "2013-05-27",
        "2013-05-27",
        "2013-08-03"]
};

var lineChartData2 = {
    "datasets": [{
        "data": [
            "0.5",
            "0.2",
            "3",
            "0.4",
            "0.3",
            "2.2",
            "2",
            "0.7",
            "0.5",
            "1"],
            "pointStrokeColor": "#fff",
            "fillColor": "rgba(155,100,220,0.5)",
            "pointColor": "rgba(155,100,220,1)",
            "strokeColor": "rgba(155,100,220,1)"
    }],
        "labels": [
        "2013-01-01",
        "2013-01-04",
        "2013-01-15",
        "2013-02-03",
        "2013-03-25",
        "2013-04-03",
        "2013-04-14",
        "2013-05-27",
        "2013-05-27",
        "2013-08-03"]
};


var myLine = new Chart(document.getElementById("canvas1").getContext("2d")).Line(lineChartData1);
var myLine2 = new Chart(document.getElementById("canvas2").getContext("2d")).Line(lineChartData2);

<script src="http://www.chartjs.org/assets/Chart.js"></script>

<body>
    <div>
      <h3>Only one Integer</h3>
      <canvas id="canvas1" height="200" width="400"></canvas>
    </div>
    <div>
      <h3>More then one Integer</h3>
      <canvas id="canvas2" height="200" width="400"></canvas>  
    </div>
</body>

我希望有用。

在ChartJS上仅显示整个单位

2 个答案: