Как скрыть нулевые значения на графике с помощью amchart.js? - PullRequest
Новая
       44

Как скрыть нулевые значения на графике с помощью amchart.js?

0 голосов
/ 19 апреля 2019

Как скрыть нулевое значение в диаграмме с помощью amchart.js?

enter image description here

Вот мой код для генерации диаграммы: 

function getStatsByFlowByOperation(){
    $.ajax({
        success: function(data) {

                //data = formatData(data);

                am4core.useTheme(am4themes_material);
                chart = am4core.create("chartdiv", am4charts.XYChart);
                chart.hiddenState.properties.opacity = 0;
                chart.data = data;
                chart.colors.step = 2;
                chart.padding(30, 30, 10, 30);
                chart.legend = new am4charts.Legend();

                var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
                categoryAxis.dataFields.category = "OPERATION_NAME";
                categoryAxis.renderer.minGridDistance = 30;
                categoryAxis.renderer.grid.template.location = 0;
                categoryAxis.renderer.labels.template.rotation = 315;
                categoryAxis.renderer.labels.template.verticalCenter = "middle";
                categoryAxis.renderer.labels.template.horizontalCenter = "right";

                var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
                valueAxis.renderer.inside = true;
                valueAxis.renderer.labels.template.disabled = true;
                valueAxis.min = 0;

                var allStatus = [];
                allStatus.push("NEW");
                allStatus.push("DISABLED");
                allStatus.push("SKIPPED");
                allStatus.push("READY");

                for(var i = 0; i < allStatus.length; i++) {
                    createSeries(allStatus[i], allStatus[i]);
                }
        },
        error: function (jqXHR, exception) {
            if (globalVars.unloaded) {
                return;
            }
            manageAjaxError(jqXHR, textStatus, errorThrown);
        }
    });
}

Это пример ввода даты: 

[{
    "READY": 0,
    " ": 1,
    "OPERATION_NAME": "INIT",
    "STEP": 1
}]

РЕДАКТИРОВАТЬ -

Решение состоит в том, чтобы вставить «ноль».Столбцы отображаются, даже если они отображают значение «0», например: 

if(data[i].READY == 0) {
    data[i].READY = null;
}

Ответы [ 3 ]

1 голос
/ 19 апреля 2019

Или есть короткий уродливый путь: 

var numbers = document.getElementsByTagName('tspan');
for(var i = 0; i < numbers.length; i++){
  if(numbers[i].innerHTML == '0'){
    numbers[i].parentElement.removeChild(numbers[i]);
  }
}
0 голосов
/ 25 апреля 2019

Изменено, чтобы изменить ноль на ноль вместо удаления после получения разъяснения по вопросу.

редактировать тест 2019-05-07 

var objData = [
  { READY: 0, " ": 1, OPERATION_NAME: "INIT", STEP: 1 },
  { READY: 0, " ": 1, OPERATION_NAME: "EXPORT_SPEC", STEP: 2 },
  { READY: 0, " ": 1, OPERATION_NAME: "TRANSFORM_APS", STEP: 3 },
  { READY: 1, OPERATION_NAME: "PUBLISH_APS", STEP: 4 }
];

// change zero values to null
_.transform(objData, function(myObj, val, idx) {
    
    if(val.READY==0){
    val.READY = null;
    }

   console.log("val: "+JSON.stringify(val));
});

console.log("After Processing");
console.log(JSON.stringify(objData));

//am4core.useTheme(am4themes_material);
chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0;
chart.data = objData;
chart.colors.step = 2;
chart.padding(30, 30, 10, 30);
chart.legend = new am4charts.Legend();

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "OPERATION_NAME";
categoryAxis.renderer.minGridDistance = 30;
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.labels.template.rotation = 315;
categoryAxis.renderer.labels.template.verticalCenter = "middle";
categoryAxis.renderer.labels.template.horizontalCenter = "right";

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.inside = true;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.min = 0;

chart.colors.list = [
  am4core.color("#8BC9FF"), // NEW
  am4core.color("#FF4D4D"), // ERROR
  am4core.color("#F2F2F2"), // DISABLED
  am4core.color("#B5E8B5"), // FINISHED
  am4core.color("#715AFF"), // SKIPPED
  am4core.color("#FFEBCC"), // TIMEOUT
  am4core.color("#BEECFF"), // READY
  am4core.color("#EDD9BA"), // RESUBMITTED
  am4core.color("#cceeff"), // DISPATCHED
  am4core.color("#FFF4BE"), // CANCELLED
  am4core.color("#FFFFB3"), // RUNNING
  am4core.color("#CCFFCC"), // DONE
  am4core.color("#FF4D4D") // ERROR_RESUMED
];

var allStatus = [];
allStatus.push("NEW");
allStatus.push("DISABLED");
allStatus.push("SKIPPED");
allStatus.push("READY");
allStatus.push("DISPATCHED");
allStatus.push("RUNNING");
allStatus.push("ERROR_RESUMED");
allStatus.push("ERROR");
allStatus.push("FINISHED");
allStatus.push("TIMEOUT");
allStatus.push("RESUBMITTED");
allStatus.push("CANCELLED");
allStatus.push("DONE");

for (var i = 0; i < allStatus.length; i++) {
  createSeries(allStatus[i], allStatus[i]);
}

function isZero(x) { return x == 0; }

// Create series
function createSeries(field, name) {
  // Set up series
  var series = chart.series.push(new am4charts.ColumnSeries());
  series.name = name;
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "OPERATION_NAME";
  series.sequencedInterpolation = true;

  // Make it stacked
  series.stacked = true;

  // Configure columns
  series.columns.template.width = am4core.percent(60);
  series.columns.template.tooltipText =
    "[bold]{name}[/]\n[font-size:14px]{categoryX}: {valueY}";

  // Add label
  var labelBullet = series.bullets.push(new am4charts.LabelBullet());
  labelBullet.label.text = "{valueY}";
  labelBullet.locationY = 0.5;

  return series;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height:97vh;
}
#chartdiv {
  width: 100%;
  height: 100%;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<div id="chartdiv"></div>
0 голосов
/ 19 апреля 2019

В amCharts может быть параметр или опция, но у меня нет опыта использования этой библиотеки, поэтому первый вариант, который мне пришёл в голову, это удалить элемент из данных.

Самый простой способ, который я знаючтобы сделать это с lodash.

Вы не предоставили данные, поэтому я использую другие данные, которые у меня есть для иллюстрации. 

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 *
 * For more information visit:
 * https://www.amcharts.com/
 *
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

am4core.useTheme(am4themes_animated);

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.hiddenState.properties.opacity = 0; // this creates initial fade-in

chart.colors.saturation = 0.4;

var objData = [{
  "country": "USA",
  "visits": 3025
}, {
  "country": "China",
  "visits": 1882
}, {
  "country": "Japan",
  "visits": 0
}, {
  "country": "Germany",
  "visits": 1322
}, {
  "country": "UK",
  "visits": 1122
}, {
  "country": "France",
  "visits": 1114
}, {
  "country": "India",
  "visits": 984
}, {
  "country": "Spain",
  "visits": 711
}, {
  "country": "Netherlands",
  "visits": 665
}, {
  "country": "Russia",
  "visits": 580
}, {
  "country": "South Korea",
  "visits": 443
}, {
  "country": "Canada",
  "visits": 441
}];

objData.visits = _.reject(objData.visits, (o) => {
  return o.visits > 0;
});

_.remove(objData, function(currentObject) {
    return currentObject.visits == 0;
});

console.log(JSON.stringify(objData));

chart.data = objData;


var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.minGridDistance = 20;
categoryAxis.renderer.minWidth = 120;

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.maxLabelPosition = 0.98;  

var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "country";
series.dataFields.valueX = "visits";
series.tooltipText = "{valueX.value}";
series.sequencedInterpolation = true;
series.defaultState.transitionDuration = 1000;
series.sequencedInterpolationDelay = 100;
series.columns.template.strokeOpacity = 0;

chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomY";

// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
series.columns.template.adapter.add("fill", (fill, target) => {
  return chart.colors.getIndex(target.dataItem.index);
});
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  height:97vh;
}
#chartdiv {
  width: 100%;
  height: 100%;
}
<script src="//www.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//www.amcharts.com/lib/4/themes/animated.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<p>Notice that Japan has 0 visits so it is removed</p>
<div id="chartdiv"></div>
...