chart.js - ChartJS 大数据范围

Question

我有一个数据集，它在最大和最小之间有很大的范围。我的问题是当最大的条有太多数据时，最小的条变得不可见。看看下面的截图。

在屏幕截图中，第二条、第三条、第五条和第六条都有一个数据点，但它们是不可见的。所以我的问题是，

1) 有没有办法让小数据点对条形图可见，例如通过在它们上设置 min-height 属性？

2）如果没有，我该如何制作图表，以便当数据太小时悬停在特定条形的整个 y 轴上时，当我将鼠标悬停在 y 轴上时，它会显示带有数据的标签？

我尝试在栏上设置不同的样式无济于事。

Answer 1

由于您没有提供代码，我只能告诉您在图表中使用对数刻度。

请参阅此示例以供参考：

var dataPoints = [
    { x: 1994, y: 25437639 },
    { x: 1995, y: 44866595 },
    { x: 1996, y: 77583866 },
    { x: 1997, y: 120992212 },
    { x: 1998, y: 188507628 },
    { x: 1999, y: 281537652 },
    { x: 2000, y: 414794957 },
    { x: 2001, y: 502292245 },
    { x: 2002, y: 665065014 },
    { x: 2003, y: 781435983 },
    { x: 2004, y: 913327771 },
    { x: 2005, y: 1030101289 },
    { x: 2006, y: 1162916818 },
    { x: 2007, y: 1373226988 },
    { x: 2008, y: 1575067520 },
    { x: 2009, y: 1766403814 },
    { x: 2010, y: 2023202974 },
    { x: 2011, y: 2231957359 },
    { x: 2012, y: 2494736248 },
    { x: 2013, y: 2728428107 },
    { x: 2014, y: 2956385569 },
    { x: 2015, y: 3185996155 },
    { x: 2016, y: 3424971237 }
];

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    zoomEnabled: true,
    theme: "dark2",
    title:{
        text: "Growth in Internet Users Globally"
    },
    axisX:{
        title: "Year",
        valueFormatString: "####",
        interval: 2
    },
    axisY:{
        logarithmic: true, //change it to false
        title: "Internet Users (Log)",
        titleFontColor: "#6D78AD",
        lineColor: "#6D78AD",
        gridThickness: 0,
        lineThickness: 1,
        includeZero: false,
        labelFormatter: addSymbols
    },
    axisY2:{
        title: "Internet Users",
        titleFontColor: "#51CDA0",
        logarithmic: false, //change it to true
        lineColor: "#51CDA0",
        gridThickness: 0,
        lineThickness: 1,
        labelFormatter: addSymbols
    },
    legend:{
        verticalAlign: "top",
        fontSize: 16,
        dockInsidePlotArea: true
    },
    data: [{
        type: "line",
        xValueFormatString: "####",
        showInLegend: true,
        name: "Log Scale",
        dataPoints: dataPoints
    },
    {
        type: "line",
        xValueFormatString: "####",
        axisYType: "secondary",
        showInLegend: true,
        name: "Linear Scale",
        dataPoints: dataPoints
    }]
});