Kendo饼图集成问题求助：新手实现饼图样式不符

Hey there! Let's work through getting your Kendo UI pie chart styled exactly how you want it. I’ve looked over your code, and here are targeted tweaks to fix common styling mismatches:

1. Lock Down Chart Dimensions #

First, make sure your chart has a defined size—this prevents it from scaling unexpectedly with parent containers. Add this CSS and chart configuration:

#chart {
  width: 650px;
  height: 450px;
  margin: 0 auto;
}

And update your Kendo chart init to include:

chartArea: {
  background: "#f8f9fa" // Optional: soft background to make slices pop
}

2. Refine Slice Visuals #

Tweak the pie slices to match your desired look with these series configurations:

• Slice Borders: Add clear borders between slices for definition
• Slice Padding: Space out slices slightly for better separation
• Explicit Color Control: Bind colors directly to data for guaranteed consistency (instead of relying on seriesColors which can shift with data changes)

Update your data and series like this:

var data = [
  { "source": "Hydro", "percentage": 22, "explode": true, color: "#03a9f4" },
  { "source": "Solar", "percentage": 2, color: "#ff9800" },
  { "source": "Nuclear", "percentage": 49, color: "#fad84a" },
  { "source": "Wind", "percentage": 27, color: "#4caf50" }
];

// Inside the kendoChart config:
series: [{ 
  type: "pie", 
  field: "percentage", 
  categoryField: "source", 
  explodeField: "explode",
  colorField: "color", // Uses the color from your data array
  border: { color: "#ffffff", width: 2 }, // White border around slices
  padding: 3, // Small gap between slices
  labels: { // Add visible labels if your desired style includes them
    visible: true,
    position: "outside",
    template: "${ category }: ${ value }%",
    font: "12px Arial, sans-serif"
  }
}]

3. Fix Skin-Related Conflicts #

Since you’re listening for kendo:skinChange, the active Kendo skin might be overriding your custom styles. If you want to ignore skins for this chart, add theme: "none" to your chart configuration:

$("#chart").kendoChart({
  theme: "none", // Disables skin styling for this chart
  // ... rest of your config
});

Full Modified Code #

Here’s the complete code with all the tweaks put together:

<div id="example">
  <div class="demo-section k-content wide">
    <div id="chart"></div>
  </div>
  <style>
    #chart {
      width: 650px;
      height: 450px;
      margin: 0 auto;
    }
  </style>
  <script>
    var data = [
      { "source": "Hydro", "percentage": 22, "explode": true, color: "#03a9f4" },
      { "source": "Solar", "percentage": 2, color: "#ff9800" },
      { "source": "Nuclear", "percentage": 49, color: "#fad84a" },
      { "source": "Wind", "percentage": 27, color: "#4caf50" }
    ];
    function createChart() {
      $("#chart").kendoChart({
        theme: "none",
        title: { text: "Break-up of Spain Electricity Production for 2008", font: "16px Arial, sans-serif" },
        legend: { position: "bottom", font: "12px Arial, sans-serif" },
        dataSource: { data: data },
        series: [{ 
          type: "pie", 
          field: "percentage", 
          categoryField: "source", 
          explodeField: "explode",
          colorField: "color",
          border: { color: "#ffffff", width: 2 },
          padding: 3,
          labels: {
            visible: true,
            position: "outside",
            template: "${ category }: ${ value }%",
            font: "12px Arial, sans-serif"
          }
        }],
        tooltip: { visible: true, template: "${ category } - ${ value }%" },
        chartArea: {
          background: "#f8f9fa"
        }
      });
    }
    $(document).ready(createChart);
    $(document).bind("kendo:skinChange", createChart);
  </script>
</div>

If your desired style includes specific elements like shadow effects, gradient fills, or label positioning tweaks, just let me know the details—I can help adjust those too!

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