Google Charts纵轴（vAxis）货币格式设置异常求助

Hey there! That weird garbled output ("4urren41970" instead of "$1.50") and your custom format strings not working are classic signs of two common issues with Google Charts: incorrect data types or using an outdated version of the Charts API. Let's break down how to fix this step by step.

1. First: Make Sure Your Data is a Number (Not a String) #

This is the most likely culprit. If the price values you're passing to Google Charts are strings (e.g., pulled from MySQL as text like "1.50" or "$1.50"), the chart can't apply numeric formatting correctly. Instead, it tries to parse the format string as text, leading to that garbled mess.

• Fix: Convert your price data to pure numeric values before passing it to the DataTable.
  • If you're fetching from MySQL, ensure the column is a numeric type (DECIMAL, FLOAT, etc.), and don't format it with currency symbols in your query.
  • If you're handling it in JavaScript, use parseFloat() or Number() to convert string values to numbers:

    // Example: Convert string price to number
    var numericPrice = parseFloat(rawPriceString);
    

2. Update to the Latest Google Charts Version #

Older versions of the Google Charts API had bugs with format string parsing. If you're using the old google.load() syntax, switch to the newer loader.js approach which loads the latest stable version:

<!-- Load the modern loader script -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  // Load the current stable version of corechart
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    // Your DataTable and chart code here
  }
</script>

3. Correctly Configure the vAxis Format #

Once your data is numeric and you're on the latest API version, adjust your vAxis options properly. Here are two reliable ways to set currency formatting:

Option A: Use the Predefined "currency" Format #

Let Google handle the formatting with its built-in currency option, and specify your currency code for consistency:

var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
  vAxis: {
    minValue: 0,
    title: "price",
    format: "currency",
    currencyCode: "USD" // Replace with your currency code (e.g., "EUR", "GBP")
  },
  explorer: { actions: ['dragToZoom', 'rightClickToReset']}
};

Option B: Use a Custom Format Pattern #

If you want full control over the format (e.g., force two decimal places), use a pattern string:

var options = {
  title: 'Company Performance',
  hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
  vAxis: {
    minValue: 0,
    title: "price",
    format: "$#,###.00" // Shows $1.50, $10,000.00, etc.
  },
  explorer: { actions: ['dragToZoom', 'rightClickToReset']}
};

Full Working Example #

Putting it all together, here's a complete snippet that should work correctly:

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

function drawChart() {
  // Create DataTable with numeric price values
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Price');
  data.addRows([
    ['2020', 1.50],
    ['2021', 2.75],
    ['2022', 3.20],
    ['2023', 10500.50]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
    vAxis: {
      minValue: 0,
      title: "price",
      format: "$#,###.00"
    },
    explorer: { actions: ['dragToZoom', 'rightClickToReset']}
  };

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

Quick Troubleshooting Check #

If you still see issues:

• Open your browser's developer tools (F12) and check the console for errors related to data types or API loading.
• Double-check that your DataTable's price column is explicitly set to 'number' (not 'string').

内容的提问来源于stack exchange，提问作者Chrisk