Javascript Pie Ch答案

【问题标题】：Javascript Pie ChJavascript Pie Ch
【发布时间】：2018-05-20 17:23:01
【问题描述】：

我正在尝试从这里自定义一个饼图： https://canvasjs.com/jquery-charts/pie-chart-index-data-label-inside/

我使用的代码如下，经过我的修改：

<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 <br> 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>

我想让它看起来像这样： https://static1.squarespace.com/static/56683787841abadb3a833983/t/5aad434c88251b56303ee2b4/1521304417200/chart.jpg?format=1000w

如何在 dataPoints 中添加一个 html 中断“”，周围是否有一个图表库可以更像上图？

感谢大家的帮助。

【问题讨论】：

这和java有什么关系？ Java！= JavaScript。在两者的工具提示中都这么说。

标签： javascript java css pie-chart canvasjs

【解决方案1】：

目前indexLabels 不支持 HTML 标签。但是，您可以使用indexLabelMaxWidth 来实现相同的目的。请检查下面的代码。

var options = {
    exportEnabled: true,
    animationEnabled: true,
    title:{
        text: "Operational Excellence"
    },
    data: [{
        type: "pie",
        showInLegend: false,
        indexLabel: "{name}",
        indexLabelMaxWidth: 100,
        indexLabelPlacement: "inside",
        dataPoints: [
            { y: 16.66666666666667, name: "Innovation" },
            { y: 16.66666666666667, name: "Leadership 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 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>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

【讨论】：