Как избавиться от запятой в данных всплывающей подсказки на графике Google? - PullRequest
Новая
       22

Как избавиться от запятой в данных всплывающей подсказки на графике Google?

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

Я хочу избавиться от запятой, которая разделяет число / дату во всплывающей подсказке, и хотела бы отформатировать данные как '2010', а не '2,010' 

    google.charts.load('current', {
callback: function () {
var rawData = [
    [2010, 100, 100],
    [2011, 105, 120],
    [2012, 111, 122],
    [2013, 122, 132],
    [2014, 131, 146],
    [2015, 139, 150],
    [2016, 143, 156],
];


var data = new google.visualization.DataTable({
  "cols": [
    {"id":"","label":"Date","type":'number'},
    {"id":"","label":"Black","type":'number'},
    {"id":"","label":"White","type":"number"}
  ]
});   

var options = {
    backgroundColor: 'transparent',
    focusTarget: 'category',
    fontName: 'Union',
    lineWidth: 3,
    colors: ['#000'],
    crosshair: { orientation: 'vertical', trigger: 'both', color: 'black' },
    tooltip: { isHtml: true},
    pointSize: 0,
    animation:{
    startup: true,
    duration: 300,
    easing: 'out'
  },
    legend: 'none',
    series: {
        0: { lineDashStyle: [4, 4],tooltip : false, color:'rgb(223, 119, 106)', enableInteractivity: false, format: '0000'},
        1: {color:'black', zIndex:5, format: '0000'},
    },
    hAxis: {
      format: '0000',
      gridlines: { color: 'transparent', count: 6 },
      textStyle: { fontSize: 14, color: 'black' },
      viewWindow: { min: 2010, max: 2016 }
  },
    vAxis:{ 
      gridlines: { count: 7 },
        textPosition: 'none',
      textStyle: { color: 'transparent' },
      viewWindow: { min: 100, max: 160 }
  },
    chartArea: { top: 110, left: 20, right: 200 },
};

var chart = new google.visualization.LineChart(document.getElementById('chart_div'));


drawChart();
setInterval(drawChart, 500);


var rowIndex = 0;
function drawChart() {
  if (rowIndex < rawData.length) {
    data.addRow(rawData[rowIndex++]);
    chart.draw(data, options);
  }
}
},
packages:['corechart']
});


<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px"></div>

Проблема, с которой я столкнулся, заключается в поддержании анимации без воздействия на данныеЯ задавался вопросом, возможно ли это?У меня проблема с поддержанием анимации без влияния на данные.Я задавался вопросом, возможно ли это?

1 Ответ

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

вы можете использовать средство форматирования чисел ... 

var formatYear = new google.visualization.NumberFormat({
  pattern: '0'
});

вам просто нужно отформатировать таблицу после добавления каждой строки ... 

function drawChart() {
  if (rowIndex < rawData.length) {
    data.addRow(rawData[rowIndex++]);
    formatYear.format(data, 0);
    chart.draw(data, options);
  }
}

см. Следующий рабочий фрагмент... 

google.charts.load('current', {
  callback: function () {
    var rawData = [
        [2010, 100, 100],
        [2011, 105, 120],
        [2012, 111, 122],
        [2013, 122, 132],
        [2014, 131, 146],
        [2015, 139, 150],
        [2016, 143, 156],
    ];

    var data = new google.visualization.DataTable({
      "cols": [
        {"id":"","label":"Date","type":'number'},
        {"id":"","label":"Black","type":'number'},
        {"id":"","label":"White","type":"number"}
      ]
    });

    var options = {
        backgroundColor: 'transparent',
        focusTarget: 'category',
        fontName: 'Union',
        lineWidth: 3,
        colors: ['#000'],
        crosshair: { orientation: 'vertical', trigger: 'both', color: 'black' },
        tooltip: { isHtml: true},
        pointSize: 0,
        animation:{
        startup: true,
        duration: 300,
        easing: 'out'
      },
        legend: 'none',
        series: {
            0: { lineDashStyle: [4, 4],tooltip : false, color:'rgb(223, 119, 106)', enableInteractivity: false, format: '0000'},
            1: {color:'black', zIndex:5, format: '0000'},
        },
        hAxis: {
          format: '0000',
          gridlines: { color: 'transparent', count: 6 },
          textStyle: { fontSize: 14, color: 'black' },
          viewWindow: { min: 2010, max: 2016 }
      },
        vAxis:{
          gridlines: { count: 7 },
            textPosition: 'none',
          textStyle: { color: 'transparent' },
          viewWindow: { min: 100, max: 160 }
      },
        chartArea: { top: 110, left: 20, right: 200 },
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

    drawChart();
    setInterval(drawChart, 500);

    var formatYear = new google.visualization.NumberFormat({
      pattern: '0'
    });

    var rowIndex = 0;
    function drawChart() {
      if (rowIndex < rawData.length) {
        data.addRow(rawData[rowIndex++]);
        formatYear.format(data, 0);
        chart.draw(data, options);
      }
    }
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...