如何将终端价值放在底部?

时间:2016-03-11 18:19:41

标签: canvasjs

如何在开始和底部图表中设置目标值?

      data: [
        {
          indexLabelFontSize: 10,
          indexLabelFontFamily: "Arial",
          indexLabelPlacement: "inside",
          type: "doughnut",
          dataPoints: [
            { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},
            { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},        
          ]
        }
      ]

这是我的图表更新http://jsfiddle.net/5y7tevnv/2/

的链接

1 个答案:

答案 0 :(得分:0)

只需输入两个数据点,其中y值为0,一个位于盯着,另一个位于末尾。我希望,这将满足您的要求。



var chart6 = new CanvasJS.Chart("chartContainer",
{   

  title:{
        text: "Target 2016",
        verticalAlign: "top",
        fontSize: 12              
      },  
  subtitles: [
    {
 /*     dockInsidePlotArea: true, */
      verticalAlign: "center",
      horizontalAlign: "center",
      text: "Target 200 m"
    }
  ],
  data: [
    {
      indexLabelFontSize: 10,
      indexLabelFontFamily: "Arial",
      indexLabelPlacement: "inside",
      type: "doughnut",
      dataPoints: [
        { y: 0, indexLabel: "0", indexLabelFontColor: "black"},
        { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},
        { y: 50, indexLabel: "50%", indexLabelFontColor: "white"},
        { y: 0, indexLabel: "200", indexLabelFontColor: "black"},
      ]
    }
  ]
});
/* chart6 semi pie */ 
/* convert chart6 ke semi pie*/
convertToHalfDoughnut(chart6);
chart6.render();
function convertToHalfDoughnut(chart6){
  var sum = 0;
  var dataPoints = chart6.options.data[0].dataPoints;

  for(var i = 0; i < dataPoints.length; i++){
    sum += dataPoints[i].y;
  }
  dataPoints.splice(0, 0, 
    {
      y: sum, color: "transparent", toolTipContent: null});
}
/* --- */
&#13;
<!DOCTYPE HTML>
<html>
<head>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>
&#13;
&#13;
&#13;