javascript - Google 图表分数数字

Question

我有一个问题。我对 Javascript 比较陌生，但我正在开发一个项目，人们希望获得有关其改进的图表。我已经成功制作了两张图表，但制作第三张图表时遇到了问题。当 y 代表随机数时，数字由 0.000yyyyy 组成，当您将鼠标悬停在图表上时，信息显示 0。我将fractionDigits 放入选项中，但无法让它们正常工作。

这是代码:

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBackgroundColor);

function drawBackgroundColor(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Xaurum Gold Growth');


  data.addRows([
[new Date(2015 , 03 , 15),0.000125],
[new Date(2015 , 04 , 09),0.000125202590875],
[new Date(2015, 04, 12), 0.000126019393875],

  ]);
var options = {
    hAxis: {
      title: 'Time',
      textStyle:{color: '#FFF'},
      titleTextStyle: {
    color: '#fff'
}
    },
    vAxis: {
      title: 'Value',
      textStyle:{color: '#FFF'},
      titleTextStyle: {
    color: '#fff'
}
    },
    legend: {
    textStyle: {color: '#fff'}
},
NumberFormat: {
  fractionDigits:15,
},
annotations: {
  boxStyle: {
    stroke: '#765e34',
    strokeWidth: 10,
  }
},
    backgroundColor: "transparent",
    colors: ['#876c3c'],


  };

  var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
  chart.draw(data, options);
}

Answer 1

要格式化工具提示中的数字，请在构建数据后使用 NumberFormat

  // format data
  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 15
  });
  formatter.format(data, 1);

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawBackgroundColor,
  packages: ['corechart']
});

function drawBackgroundColor(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Xaurum Gold Growth');
  data.addRows([
    [new Date(2015 , 03 , 15), 0.000125],
    [new Date(2015 , 04 , 09), 0.000125202590875],
    [new Date(2015, 04, 12), 0.000126019393875]
  ]);

  // format data
  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 15
  });
  formatter.format(data, 1);

  var options = {
    hAxis: {
      title: 'Time',
      textStyle:{
        color: '#FFF'
      },
      titleTextStyle: {
        color: '#fff'
      }
    },
    vAxis: {
      title: 'Value',
      textStyle:{
        color: '#FFF'
      },
      titleTextStyle: {
        color: '#fff'
      }
    },
    legend: {
      textStyle: {
        color: '#fff'
      }
    },
    annotations: {
      boxStyle: {
        stroke: '#765e34',
        strokeWidth: 10,
      }
    },
    backgroundColor: 'transparent',
    colors: ['#876c3c']
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

编辑

在设置注释样式之前，必须包含注释列

使用 DataView 添加列，使用函数“字符串化”系列列

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawBackgroundColor,
  packages: ['corechart']
});

function drawBackgroundColor(transparent) {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'X');
  data.addColumn('number', 'Xaurum Gold Growth');
  data.addRows([
    [new Date(2015, 03, 15), 0.000125],
    [new Date(2015, 04, 09), 0.000125202590875],
    [new Date(2015, 04, 12), 0.000126019393875],
    [new Date(2015, 05, 22), 0.000126211199625],
    [new Date(2015, 06, 07), 0.000127017994375],
    [new Date(2015, 06, 08), 0.000127487763],
    [new Date(2015, 06, 09), 0.000128022515125],
    [new Date(2015, 06, 10), 0.00012886722975],
    [new Date(2015, 06, 11), 0.00012921927025],
  ]);

  // add annotation column
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }]);

  var formatter = new google.visualization.NumberFormat({
    fractionDigits: 15
  });
  formatter.format(data, 1);

  var options = {
    hAxis: {
      title: 'Time',
      textStyle: {
        color: '#FFF'
      },
      titleTextStyle: {
        color: '#fff'
      }
    },
    vAxis: {
      title: 'Value',
      textStyle: {
        color: '#FFF'
      },
      titleTextStyle: {
        color: '#fff'
      }
    },
    legend: {
      textStyle: {
        color: '#fff'
      }
    },
    annotations: {
      boxStyle: {
        stroke: '#876c3c',
        strokeWidth:3
      },
      textStyle: {
        color: '#876c3c'
      }
    },
    backgroundColor: "transparent",
    colors: ['#876c3c']
  };

  var chart = new google.visualization.LineChart(document.getElementById('charta_div'));
  // use data view to draw chart
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="charta_div"></div>