CanvasJS饼图换行标签实现及类目标图表库咨询

Hey Paul, let's break down your questions and solve them step by step:

CanvasJS doesn't support HTML tags like <br> for text labels because it renders content directly on the canvas (not using DOM elements). Instead, you need to use the JavaScript newline character \n to create line breaks in your labels.

Here's your modified code with proper line breaks:

<script type="text/javascript">
  window.onload = function() {
    var options = {
      exportEnabled: true,
      animationEnabled: true,
      title:{
        text: "Operational Excellence"
      },
      data: [{
        type: "pie",
        showInLegend: false,
        indexLabel: "{name}",
        indexLabelPlacement: "inside",
        dataPoints: [
          { y: 16.66666666666667, name: "Innovation" },
          { y: 16.66666666666667, name: "Leadership \n Behaviours" },
          { y: 16.66666666666667, name: "Continuous Improvement" },
          { y: 16.66666666666667, name: "Employee Engagement" },
          { y: 16.66666666666667, name: "Exceed Customer Expectations"},
          { y: 16.66666666666667, name: "High Reliability" }
        ]
      }]
    };
    $("#chartContainer").CanvasJSChart(options);
  }
</script>
<div id="chartContainer" style="height: 100%; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

This change will make the "Leadership Behaviours" label split into two lines inside the pie slice, just like you wanted.

If you're looking to match the exact polished style of your reference chart, here are some great options:

• Chart.js: A lightweight, open-source library with excellent customization capabilities. It supports pie charts with line breaks (using \n), gradient fills, shadows, and fine-grained control over label positioning. It's easy to integrate and perfect for building sleek, modern charts.
• Highcharts: A feature-rich library that offers out-of-the-box support for beautiful pie chart styles. It handles label line breaks seamlessly, allows custom color schemes, and includes built-in options for shadows, rounded edges, and interactive elements—all of which align with your reference chart's look.
• D3.js: For full control over every detail of your chart, D3.js is the way to go. It lets you build custom pie charts from scratch using SVG, so you can perfectly replicate the shadows, gradients, and label styling of your example. Keep in mind it has a steeper learning curve compared to other libraries.
• Google Charts: A free, easy-to-use library with pre-built, aesthetically pleasing pie chart templates. It supports line breaks in labels and offers simple configuration for adjusting colors, shadows, and overall appearance, making it a quick solution for your needs.

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