Question

Jsfiddle 我有上面的图表。有两种类型的值。负值和正值。我在这里使用角度图表j i）在X轴上我希望字体的负值为一种颜色，而另一种颜色的正值在同一X轴上，零值应为一种颜色。绿色的负值和红色的正值零黑色。
ii）我需要y轴刻度和图形之间的空间 iii）如何在y轴上对齐文本。即这里Y刻度值是右对齐的。我需要它保持对齐。
iv）是否可以为x轴刻度提供盒阴影

任何人都可以帮助我。

var ctx = $("#graphTest").get(0).getContext("2d");


var options = {
  barShowStroke: false,
  scaleBeginAtZero : false,
  scaleOverride: true,
  scaleSteps: 20,
  scaleStepWidth: 2,
  scaleStartValue: -20,
  responsive: true,
  barBeginAtOrigin: true,
  scales: {
    xAxes: [
        {
            stacked: true,
            ticks: {
                fontColor : 'red',
                callback: function(label, index, labels) {
                    console.log(label+" "+index+ " "+labels);
                    return label < 0 ? label * -1 : label;
                }
            },
            scaleLabel: {
                display: true,
                labelString: '1k = 1000'
            }
        }
    ],
  yAxes: [{
    stacked: true
  }]
}
};

 var data = {
labels: ["January", "February", "March", "April", "May", "June",      "July"],
datasets: [
      {
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: [-65, 59, 80, -81, 56, 55, 40],
    },

     {
        backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1,
        data: [10, -59, -80, 81, -56, -55, -40],
    }
   ]
 };


var myBarChart = new Chart(ctx, {
   type: 'horizontalBar',
   data: data,
   options: options
 });

如何根据我们在图表js中的要求设置刻度？

0 个答案: