ChartJS большой диапазон данных - PullRequest
Новая
       8

ChartJS большой диапазон данных

0 голосов
/ 06 сентября 2018

У меня есть набор данных, который имеет большой диапазон между самым большим и самым маленьким. Моя проблема в том, что самый маленький столбец становится невидимым, когда на самом большом столбце слишком много данных. Посмотрите на скриншот ниже.

enter image description here

На скриншоте второй, третий, пятый и шестой столбцы имеют одну точку данных, но они невидимы. Итак, мой вопрос,

1) Есть ли в любом случае сделать небольшую точку данных видимой для гистограммы, например, установив для них свойство min-height?

2) Если нет, как я могу сделать диаграмму таким образом, чтобы зависание работало по всей оси y для определенного столбца, когда данные слишком малы, чтобы при наведении курсора на ось y отображалась метка с данными?

Я пытался установить разные стили на панелях, но безрезультатно.

1 Ответ

0 голосов
/ 06 сентября 2018

Поскольку вы не предоставили свой код, я могу только попросить вас использовать логарифмическую шкалу для вашей диаграммы.

См. этот пример для справки: 

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