Question

我有100个数据点的数据集，其中我只想显示10个点，因为显示所有100个点看起来太杂乱。

这是我的代码：http://codepen.io/chriscruz/pen/XmEaxR

<html>
  <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
  </head>

  <body>
    <canvas id="myChart" width="400" height="400"></canvas>


    <script>
      // Get the context of the canvas element we want to select

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    },
    {
        value: 40,
        color: "#949FB1",
        highlight: "#A8B3C5",
        label: "Grey"
    },
    {
        value: 120,
        color: "#4D5360",
        highlight: "#616774",
        label: "Dark Grey"
    }

];

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September","January", "February", "March", "April", "May", "June", "July","August","September"],
    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",
            pointDot : false,
            pointHighlightStroke: "rgba(220,220,220,1)",

            data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data);

    </script>
  </body>

</html>

我使用了文档here，建议添加＆quot; pointDot：false＆＃39;会让图表不为每个点显示一个点。

Answer 1

您需要对ChartJS库进行自定义修改。 ChartJS默认情况下没有跳过X标签的选项。检查此库https://github.com/hay-wire/Chart.js/tree/skip-xlabels，其中包含一项修改，允许您通过调用{showXLabels：10}为每个刻度显示一定数量的X标签。

lineChart = new Chart(ctxlc).Line(datalc, {
    showXLabels: 10
});

如果这太复杂/您需要保留当前的图表JS库，那么很容易将空引号作为每个标签传递，以便所有点都显示但只有一些标签可以。

也许我在这里偏离轨道，但如果你真的只想显示10分而不是100分，为什么不将这10分只传给chartJS图书馆呢？我假设你只想展示有限数量的标签？

如何使用大型数据集减少line chartjs图表上显示的点数？

1 个答案: