グラフには、水平線と垂直線の両方を含む多くの例があります。しかし、横棒グラフで縦線を描く方法はありませんでした。ChartJSを使用して横棒グラフに縦線を描画するにはどうすればよいですか？
"横棒グラフ" のオプションがあるように、 "縦線グラフ" オプションがありません。水平棒グラフと垂直線を結合するにはどうすればよいですか？
ChartJSはカスタムプラグインをサポートしています。チャートオプションから新しいプロパティを読み込み、指定されたインデックスにラインを描画するプラグインを作成します。
//Create the plug in
var originalLineDraw = Chart.controllers.horizontalBar.prototype.draw;
Chart.helpers.extend(Chart.controllers.horizontalBar.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.options.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
var x1 = xaxis.getPixelForValue(index);
var y1 = yaxis.top;
var x2 = xaxis.getPixelForValue(index);
var y2 = yaxis.bottom;
ctx.save();
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.strokeStyle = 'red';
ctx.lineTo(x2, y2);
ctx.stroke();
ctx.restore();
}
}
});
//Set up the chart data
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
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],
}
]
};
//Load Chart
var ctx = $("#myChart");
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: data,
options: {
//Set the index of the value where you want to draw the line
lineAtIndex: 60,
legend: {
display: false
}
}
});<canvas id="myChart"></canvas>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js'></script>
<script src="horizontalBarPlugin.js"></script>
<script src="buildChart.js"></script>あなたはこれを試してみました：
結果はバーデータセットと同じ軸の下のように使用して同じチャート上で使用することができるラインデータセットを持っているでしょうか？これは、縦棒グラフの横線です。つまり、あなたの反対の場合です。私はあなたのアイデアを持っている場合は、あなたに似た何かを探してではなく、横棒グラフではなく、タイムスパンバーだ
var chart = c3.generate({
bindto: '#chartContainer',
tooltip: {
grouped: false
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350],
['data3', 30, 200, 100, 400, 150, 250],
['data4', 130, 340, 200, 500, 250, 350],
['data5', 130, 340, 200, 500, 250, 350],
['data6', 130, 340, 200, 500, 250, 350],
['data7', 130, 340, 200, 500, 250, 350],
['diif1', null, null, 700 ],
['diif2', null, null, 1200]
],
types:{
"data1" :"bar",
"data2" :"bar",
"data3" :"bar",
"data4" :"bar",
"data5" :"bar",
"data6" :"bar",
"data7" :"bar",
"diff1" : "line",
"diff2" : "line"
},
order:null,
groups: [
['data1', 'data2','data3', 'data4'],
['data5', 'data6','data7']
],
onclick: function (d, element) {
var name=d.name;
drilldown(name);
}
},
grid: {
y: {
lines:[{value:1400,text:1400},
{value: 1450,text: 1450}
]
}
}
});
function drilldown(name){
alert('Call for ' +name);
}
http://jsfiddle.net/9nxcfzb9/12/
：しかし、多分あなたはそれのうち有益な何かを導き出すことができます私に教えてください： How do I change or add the vertical line on a tooltip of a c3 graph?
これは私が探していたまさにです。 –