HTML5图表：Jasper Studio中提示框格式自定义

Got it, let's tackle this problem—you need tooltips in your HTML5 bar chart to display values with currency-specific decimal places, right? The fixed decimal setting in your chart's tooltip options isn't cutting it because different countries use different currency formats. Here's how to solve this with custom formatting, using common HTML5 chart libraries as examples:

Core Approach #

Instead of relying on the global fixed decimal place setting, we'll use custom tooltip callback functions to dynamically format each value based on its associated currency. Most modern HTML5 chart libraries (like Chart.js, ECharts) support this level of customization.

Example 1: Chart.js (Most Popular HTML5 Chart Library) #

First, let's set up a bar chart where each dataset represents a country, with custom currency metadata attached. We'll use the browser's built-in Intl.NumberFormat to handle currency formatting correctly.

HTML Setup

<canvas id="countrySalesChart"></canvas>

JavaScript Implementation

// Define currency-specific formatting rules (adjust based on your needs)
const currencyRules = {
  USD: { minDecimals: 2, maxDecimals: 2 },
  JPY: { minDecimals: 0, maxDecimals: 0 },
  EUR: { minDecimals: 2, maxDecimals: 2 },
  INR: { minDecimals: 2, maxDecimals: 2 }
};

// Chart data: each dataset includes a custom "currency" property
const chartData = {
  labels: ["Q1", "Q2", "Q3", "Q4"],
  datasets: [
    {
      label: "USA",
      data: [1200.50, 1900.75, 3000.00, 2400.25],
      backgroundColor: "rgba(255, 99, 132, 0.5)",
      currency: "USD"
    },
    {
      label: "Japan",
      data: [50000, 75000, 60000, 80000],
      backgroundColor: "rgba(54, 162, 235, 0.5)",
      currency: "JPY"
    },
    {
      label: "Germany",
      data: [1500.99, 2200.50, 1800.00, 2500.75],
      backgroundColor: "rgba(255, 206, 86, 0.5)",
      currency: "EUR"
    }
  ]
};

// Initialize the chart with custom tooltip formatting
const ctx = document.getElementById('countrySalesChart').getContext('2d');
new Chart(ctx, {
  type: 'bar',
  data: chartData,
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            const dataset = context.dataset;
            const rawValue = context.parsed.y;
            const currency = dataset.currency;
            const rules = currencyRules[currency];

            // Format the value using the correct currency rules
            const formattedValue = new Intl.NumberFormat('en-US', {
              style: 'currency',
              currency: currency,
              minimumFractionDigits: rules.minDecimals,
              maximumFractionDigits: rules.maxDecimals
            }).format(rawValue);

            return `${dataset.label}: ${formattedValue}`;
          }
        }
      }
    }
  }
});

Example 2: ECharts (Another Widely Used Library) #

If you're using ECharts, the logic is similar—we'll use the tooltip's formatter function to dynamically format values:

// Initialize ECharts instance
const chartDom = document.getElementById('countrySalesChart');
const myChart = echarts.init(chartDom);

// Currency rules and data setup (same as above)
const currencyRules = {
  USD: { minDecimals: 2, maxDecimals: 2 },
  JPY: { minDecimals: 0, maxDecimals: 0 }
};

const option = {
  xAxis: { type: 'category', data: ["Q1", "Q2", "Q3", "Q4"] },
  yAxis: { type: 'value' },
  series: [
    { name: 'USA', type: 'bar', data: [1200.50, 1900.75], currency: 'USD' },
    { name: 'Japan', type: 'bar', data: [50000, 75000], currency: 'JPY' }
  ],
  tooltip: {
    formatter: function(params) {
      const currency = params.series.currency;
      const rules = currencyRules[currency];
      const formattedValue = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: currency,
        minimumFractionDigits: rules.minDecimals,
        maximumFractionDigits: rules.maxDecimals
      }).format(params.value);
      return `${params.seriesName}: ${formattedValue}`;
    }
  }
};

myChart.setOption(option);

Key Takeaways #

• Attach currency metadata to each dataset so your tooltip knows which formatting rules to use.
• Use Intl.NumberFormat for reliable, locale-aware currency formatting (it handles more than just decimals—like currency symbols too!).
• Replace the default tooltip label with a custom callback that applies the correct decimal rules based on the dataset's currency.

内容的提问来源于stack exchange，提问作者Venkata Thulasi B