Question

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

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

1）是否有通过设置min-height属性使条形图可见小的数据点的方法？

2）如果不是，那么如何制作图表，以便当数据太小时将悬停在特定条形的整个y轴上工作，以便当我将鼠标悬停在y轴上时显示带有数据的标签？ / p>

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

Answer 1

由于您尚未提供代码，因此我只能告诉您在图表中使用logarithmic scale。

请参见this example以供参考：

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
    }]
});

ChartJS大数据范围

1 个答案: